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

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 2

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 ! :-)