How to remove "onclick" with JQuery?

HtmlJqueryAttributesEvent HandlingJquery Events

Html Problem Overview


PHP code:

<a id="a$id" onclick="check($id,1)" href="javascript:void(0)"  class="black">Qualify</a>

I want to remove the onclick="check($id,1) so the link cannot be clicked or "check($id,1) won't be fired. How can I do it with JQuery?

Html Solutions


Solution 1 - Html

Old Way (pre-1.7):

$("...").attr("onclick", "").unbind("click");

New Way (1.7+):

$("...").prop("onclick", null).off("click");

(Replace ... with the selector you need.)

// use the "[attr=value]" syntax to avoid syntax errors with special characters (like "$")
$('[id="a$id"]').prop('onclick',null).off('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<a id="a$id" onclick="alert('get rid of this')" href="javascript:void(0)"  class="black">Qualify</a>

Solution 2 - Html

I know this is quite old, but when a lost stranger finds this question looking for an answer (like I did) then this is the best way to do it, instead of using removeAttr():

$element.prop("onclick", null);

Citing jQuerys official doku:

> "Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead"

Solution 3 - Html

Removing onclick property

Suppose you added your click event inline, like this :

<button id="myButton" onclick="alert('test')">Married</button>

Then, you can remove the event like this :

$("#myButton").prop('onclick', null); // Removes 'onclick' property if found

Removing click event listeners

Suppose you added your click event by defining an event listener, like this :

$("button").on("click", function() { alert("clicked!"); });

... or like this:

$("button").click(function() { alert("clicked!"); });

Then, you can remove the event like this :

$("#myButton").off('click');          // Removes other events if found

Removing both

If you're uncertain how your event has been added, you can combine both, like this :

$("#myButton").prop('onclick', null)  // Removes 'onclick' property if found
              .off('click');          // Removes other events if found

Solution 4 - Html

if you are using jquery 1.7

$('html').off('click');

else

$('html').unbind('click');

Solution 5 - Html

It is very easy using removeAttr.

$(element).removeAttr("onclick");

Solution 6 - Html

After trying so hard with bind, unbind, on, off, click, attr, removeAttr, prop I made it work. So, I have the following scenario: In my html i have NOT attached any inline onclick handlers.

Then in my Javascript i used the following to add an inline onclick handler:

$(element).attr('onclick','myFunction()');

To remove this at a later point from Javascript I used the following:

$(element).prop('onclick',null);

This is the way it worked for me to bind and unbind click events dinamically in Javascript. Remember NOT to insert any inline onclick handler in your elements.

Solution 7 - Html

What if onclick event is not directly on element, but from parent element? This should work:

$(".noclick").attr('onclick','').unbind('click');
$(".noclick").click(function(e){
	e.preventDefault();
	e.stopPropagation();
	return false;
});

Solution 8 - Html

Try this if you unbind the onclick event by ID Then use:

$('#youLinkID').attr('onclick','').unbind('click');

Try this if you unbind the onclick event by Class Then use:

$('.className').attr('onclick','').unbind('click');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStevenView Question on Stackoverflow
Solution 1 - HtmlglmxndrView Answer on Stackoverflow
Solution 2 - HtmlacmeView Answer on Stackoverflow
Solution 3 - HtmlJohn SlegersView Answer on Stackoverflow
Solution 4 - HtmlJaydeep JadavView Answer on Stackoverflow
Solution 5 - HtmlNor Leyva LópezView Answer on Stackoverflow
Solution 6 - HtmlbboydfloView Answer on Stackoverflow
Solution 7 - HtmlMilanView Answer on Stackoverflow
Solution 8 - HtmlVishnu SharmaView Answer on Stackoverflow