CODEWITHSUNDEEP
javascriptinternet-explorer
AlexPac
AlexPac

Reputation: 620

JavaScript remove() doesn't work in IE

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?

Upvotes: 53

Views: 70467

Answers (5)

Vijay Prajapati
Vijay Prajapati

Reputation: 758

Please try this. (Support all browsers)

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

Upvotes: 3

karim essouabni
karim essouabni

Reputation: 161

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.

Upvotes: 16

meda
meda

Reputation: 45490

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);
}

Upvotes: 6

adeneo
adeneo

Reputation: 318252

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

Compatibility table from MDN

enter image description here enter image description here

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');

Upvotes: 25

Antoine Subit
Antoine Subit

Reputation: 9913

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

Browser compatibility for remove()

Desktop browser compatipility for remove() function

Mobile browser compatipility for remove() function

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

Upvotes: 93

Related Questions