How to Remove "Onclick" with Jquery

How to remove onclick with JQuery?

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>

jQuery - remove onclick from an element

You can use the removeAttr() method:

Remove an attribute from each element in the set of matched elements.

$('#whatever').removeAttr('onclick')
$("#whatever").click(function() {
//do something
});

How to remove “onclick” with JQuery, so that it can be added again later?

I think you might be looking for the .off() method, which replaced unbind after it was deprecated a while back. In your code it would look like this:

$("#sq" + nextPossibleIndices[i]).off('click');

If you're having difficult with it not working, try double-checking that you're selecting the correct element. In a pinch you can confirm that at least the method (off) works by trying it in the Chrome/Firefox consoles and removing click bindings from everything ala: $('*').off('click'); You wouldn't want to use that in actual site code, of course.

jquery remove onclick event

You can use namespaces to unbind a partiuclar click handler.

$("a").bind("click.pick1", function () {
alert('pick 1');
$(this).unbind("click.pick1");
}).bind("click.pick2", function () {
alert('pick 2');
});

Example on jsfiddle

Does unbind('click') remove onclick?

No it does not remove the onclick event, as is demonstrated here.

Binded events are stored within jQuery objects, therefore, unbind just removes the event from the jQuery object.

unbind will only remove events that have been attached using the jQuery bind method and/or the deprecated live method.

If you want to reset the actual onclick event using jQuery, then just use one of the following methods:

$('#myelement').attr('onclick','');
$('#myelement').removeAttr('onclick');

If you want to add an event to specifically the onclick of an element (not bind a jQuery click event), then simply use the following:

$('#myelement').attr('onclick','alert(\'hello\')');

I would strongly disadvise the above method though as I am sure you can appreciate, adding a function to this would be a little tricky escaping all of the quotes...


In addition, might I advise you use the on and off jQuery methods instead. Whilst these are only available in newer versions of jQuery, they are the preferred method as stated here:

As of jQuery 1.7, the .on() method is the preferred method for
attaching event handlers to a document. For earlier versions, the
.bind() method is used for attaching an event handler directly to
elements. Handlers are attached to the currently selected elements in
the jQuery object, so those elements must exist at the point the call
to .bind() occurs. For more flexible event binding, see the discussion
of event delegation in .on() or .delegate().

See the following for more information:

  1. jQuery Attr Method
  2. jQuery Bind Method
  3. jQuery Unbind Method
  4. jQuery On Method
  5. jQuery Off Method

JQuery: Remove OnClick events from 'a' tags

You can try this:

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

Edit Updating answer based on comments and jquery Docs:

Note: 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

Best way to do this:

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

JQuery removing li using onclick event

If you are using onclick then you have to invoke the function with the reference since this won't refer to clicked element(refers to window object most commonly) and based on that remove that element.

Element creation:

let removeBtn = $('<button onclick = "removeElement(this)">X</button>');

Function :

function removeElement(ele) {
$(ele).parent().remove();
}

Or alternately you can use the existing function but bind event handler using jQuery after element creation.

let removeBtn = $('<button>X</button>');
removeElement.click(removeElement);

An another option would be event delegation which helps to handle events on dynamically created elements.

Dynamically generated button remove by onClick in jQuery

Try following code. Do you want to restore 'disabled': false attribute after removing specified element?

$(".tag-item").click(function() {  var btnid = $(this).data("id");  var btnname = $(this).data("name");  $("#article-tags").append("<button type='button' class='tag-selected ntdelbutton'>" + btnname + "  <i class='fa fa-times-circle' aria-hidden='true'></i></button>");  $(this).css({    "background-color": "#DFE2E5",    "color": "#ababab"  });  $(this).attr("disabled", true);  $(".ntdelbutton").click(function() {    $(this).remove();  });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="article-tags"></div>
<div> <button type="button" data-id="1" data-name="tag" class="tag-item">tag</button> <button type="button" data-id="2" data-name="tag2" class="tag-item"> tag2</button> <button type="button" data-id="3" data-name="tag3" class="tag-item">tag3</button> <button type="button" data-id="4" data-name="tag4" class="tag-item">tag4</button></div>


Related Topics



Leave a reply



Submit