JavaScript remove() не работает в IE

У меня есть следующий код в 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();             
}

Я знаю, что это проблема, потому что я использовал alert('test');, чтобы увидеть, где код перестает работать. Все работает в FF, Chrome, Opera и других, но не в IE.

Не могли бы вы рассказать, что не так?

Ответ 1

IE не поддерживает remove() собственную функцию Javascript, но делает поддержка removeChild().

Совместимость браузера для remove()

Решение n ° 1

Используйте remove() в чистом Javascript, который вы можете объявить сами следующим кодом:

// 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();

Как вы видите, функция получает родительский элемент node, а затем удаляет этот элемент из своего родителя с помощью встроенной функции removeChild().

Решение n ° 2

Используйте removeChild() в чистом JavaScript во всем браузере, в том числе IE, просто назовите его insteed remove().

element.removeChild(child);

Дополнительная информация о Mozilla Developer Network.

Решение n ° 3

Используйте jQuery через code.jquery.com CDN, используя следующий код:

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

Эта функция включена в библиотеку jQuery, поэтому вы можете вызвать ее после включения.

Счастливое кодирование!: -)

Ответ 2

Нативный childNode.remove() - это новый экспериментальный метод, который не поддерживается в Internet Explorer, только в Edge

Таблица совместимости из MDN

Вместо этого можно использовать более широко поддерживаемый Node.removeChild

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

или используйте polyfill из MDN, чтобы добавить поддержку для всех браузеров

(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]);

Существует также метод remove() в jQuery, который работает кросс-браузер, но для этого потребуется добавить библиотеку jQuery.

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

Как sidenote getElementsByClassName работает только с IE9 и выше, использование querySelector также добавит поддержку IE8

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