jQuery this.remove() -vs.- $('#id').remove() in Internet Explorer (IE 9+)

Question

Why is it that this.remove() doesn't work in IE9+?

<input type="button" value="Next1" id="nextButton1">
<br>
<input type="button" value="Next2" id="nextButton2">

$('#nextButton1').on('click', function() {
   this.remove(); // works in all browsers but IE9+
});

$('#nextButton2').on('click', function() {
   $('#nextButton2').remove(); //works in all browsers
});

JSFiddle live version

Answer 1

That's because you're using the ChildNode.remove() method which is not supported by all browsers.

this ---> refers to a node. //WARNING: This is an experimental technology

jQuery's .remove() method, however is cross-browser and so to use it you have to wrap this in $(...) like this:

$(this).remove();

ChildNode.remove() Browser Compatibility

this.remove() is supported by the following desktop browsers:

- Chrome 23+
- Firefox 23+
- Opera 10+
- Safari 7+

Answer 2

Wrap this in jQuery:

$('#nextButton1').on('click', function() {
   $(this).remove();
});