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()
![Совместимость обозревателя рабочего стола для функции remove()]()
![Совместимость с мобильным браузером для функции 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');