How to remove "onclick" with JQuery?

Dealing with dynamically added elements

For elements dynamically added to the DOM after initial event binding, event delegation is the technique to use. Here is how this is achieved:

$(document).off('click', '#dynamicElement');


//Did "HTML snakes" 🐍 just give birth to a dynamic child element? Our snake charmer will take care of it! 👳‍♂️

Tailoring the removal method to various conditions

Sometime you may only want to remove the inline onclick leaving other bound events intact. In such cases, using the .prop() method guarantees precision:

$('#elementID').prop('onclick', null);


//We are not here to reinvent the wheel. Just remove the spikes. 🎯

This sets the onclick property to null, elimininating only the inline onclick event handler.

Carefully maintaining functionality and usability

Keep links clickable

While you neutralize the onclick, you want the link to retain its functionality. Rule number one, make sure not to remove or alter the href attribute.

Refining targeting with class selectors

At certain times, you need to target an element more specifically. Adding a class selector can help:

$('#elementID.className').off('click');


// The more, the merrier, right? Yes, but not when it comes to event handlers! 🎈

By doing so, only elements with the specified class have the onclick event handlers removed.

Safety measures and fallback strategies

Prepare for special character selectors

When dealing with selectors that include special characters, particularly in attributes, use the [attr=value] syntax to avoid syntax errors:

$("a[onclick^='check']").off('click');


//Avoid syntax errors just like avoiding calling your ex at 3am after party! 😛

Navigate through older versions of Internet Explorer

Older versions of Internet Explorer (IE) may display unusual behavior when using .removeAttr('onclick'). What's the solution to this issue? Resort to .prop('onclick', null) for compatibility.

Always verify by testing

Always test your solution. Ensure the removal of the onclick handler doesn't create conflicts with other element behaviors or bound handlers.

Digging deeper into .prop() and .off()

Making the best of .prop()

For event data preservation

Use .prop() when you want to remove inline event handlers but don't want to mess with any event data or handlers attached via jQuery.

Adjusting to changing attributes

.prop() works effectively for elements whose attributes get updated during the session, as it deals with properties of the DOM element, not the HTML attribute directly.

Inline vs. bound handlers

Be aware. .prop('onclick', null) doesn't interfere with handlers attached via .on() or .click(). It's a typical butcher who cuts only the inline onclick attributes!

The power of .off()

Comprehensive event unbinding

.off() comes in handy when you desire to wipe all event handlers bound to the elements, acting as the cleaners who sweep every dust particle.

Dealing with multiple events

Unlike .prop(), .off() can efficiently unbind multiple event types simultaneously:

$('#elementID').off('click dblclick');


//Jack of all trades, that's what .off() is! Can handle multiple things at once, unlike my ex! 😜

Taming namespaced events with .off()

If you used namespaced events, .off() can target these specifically, offering fine-tuned control:

$('#elementID').off('click.myNamespace');


//Like a strict teacher who knows every kid in her class, .off() handles each event with its namespace! 🏫