JavaScript remove() doesn't work in IE

Question

I have the following code in JavaScript:

all_el_ul = document.getElementsByClassName('element_list')[0];
div_list = all_el_ul.getElementsByTagName("div");
for (i = 0; i < div_list.length; i += 1) {         
  div_list[i].remove();             
}

I know that this is the problem because I used alert('test'); to see where the code stops working. Everything is working in FF, Chrome, Opera and others but not in IE.

Could you please tell what is wrong?

Answer 1

IE doesn't support remove() native Javascript function but does support removeChild().

Browser compatibility for remove()

Solution n°1

Use remove() in pure Javascript you can declare it yourself with this following code :

// Create Element.remove() function if not exist
if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}
// Call remove() according to your need
child.remove();

As you can see the function get the parent node of element and then remove this element from his parent with removeChild() native function.

Solution n°2

Use removeChild() in pure JavaScript on all browser including IE just call it insteed of remove().

element.removeChild(child);

More info on Mozilla Developer Network.

Solution n°3

Use jQuery through code.jquery.com CDN by using this following code :

<!-- Include jQuery -->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<!-- Use remove() -->
<script>
child.remove();
</script>

The function is included in the jQuery library so you can call it after inclusion.

Happy coding ! :-)

Answer 2

The native childNode.remove() is a new experimental method that is not is supported in Internet Explorer, only in Edge

Compatibility table from MDN

You could use the more widely supported Node.removeChild instead

var all_el_ul = document.getElementsByClassName('element_list')[0];
var div_list  = all_el_ul.getElementsByTagName("div");

for (i = 0; i < div_list.length; i += 1) {         
   div_list[i].parentNode.removeChild(div_list[i]);             
}

or use the polyfill from MDN to add support for all browsers

(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

There is also a remove() method in jQuery, that does work cross-browser, but that would require adding the jQuery library.

$('.element_list').first().find('div').remove();

As a sidenote getElementsByClassName only works from IE9 and up, using querySelector would add IE8 support as well

var all_el_ul = document.querySelector('.element_list');

Answer 3

Try adding this to the top of your JavaScript file:

if (!('remove' in Element.prototype)) {
  Element.prototype['remove'] = function () {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

It is a small Element.remove() polyfill.

Add that to your JS and [element].remove() should magically start working in IE.

Answer 4

Here is what I had to do for it to work in IE

if (typeof textField.remove === 'function') {
  textField.remove();
} else {
  textField.parentNode.removeChild(textField);
}

Answer 5

Please try this. (Support all browsers)

var child = document.getElementById(id);
child.parentNode.removeChild(child);