使用 JS 移除 onclick 功能

Question

I am using a host that has a template for nav bars, I can style it but cannot edit the content within it. The search function brings up a search box, however I have developed an advanced search on the actual page /search.. Is there a way to remove the onclick and target from this link? I cannot access the actual HTML for this to just remove it, therefore I have to have something override it.

 <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;" target="_blank">Search</a>

Answer 1

you can use removeAttribute function to remove those attributes. below is a working example.

 window.onload=function(){ var anc=document.getElementsByClassName("mainmenu"); anc[0].removeAttribute("target"); anc[0].removeAttribute("onclick"); }

 <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;" target="_blank">Search</a>

Answer 2

Assigning null to the IDL attribute will clear the inline handler:

 const a = document.querySelector('.mainmenu'); a.onclick = null; a.removeAttribute('target');

 <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;" target="_blank">Search</a>

Answer 3

Remove the target and onclick attribute and replace the href attribute value with javascript:void(0) . You can use the below code for this.

 var a = document.getElementsByClassName('mainmenu')[0]; a.removeAttribute('onclick'); a.removeAttribute('target'); a.setAttribute('href', 'javascript:void(0)');

 <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;" target="_blank">Search</a>