Удаление элемента по ID
Когда вы удаляете элемент с помощью стандартного JavaScript, необходимо сначала обратиться к родительскому элементу:
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Обращение к родительскому узлу перед удалением элемента кажется мне немного странным. Есть ли причина, по которой JavaScript работает именно так?
5 ответ(ов)
Чтобы удалить элемент из DOM с использованием outerHTML
и обеспечить кроссбраузерную совместимость, включая Internet Explorer 11, лучше использовать метод remove()
, так как он более современный и совместим с большим количеством браузеров. Однако, если вы все же хотите использовать outerHTML
, имейте в виду, что в IE 11 это может не сработать как ожидается.
Вот пример того, как можно удалить элемент с помощью outerHTML
:
var element = document.getElementById("element-id");
if (element) {
element.outerHTML = "";
}
Но, как уже упоминалось, рекомендуется использовать remove()
:
var element = document.getElementById("element-id");
if (element) {
element.remove();
}
Этот метод безопаснее и предпочтительнее, так как он напрямую удаляет элемент из DOM без необходимости манипуляции с outerHTML
, что может быть менее предсказуемо в различных браузерах.
Вы можете создать функцию remove
, чтобы вам не приходилось каждый раз об этом думать:
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
Эта функция принимает идентификатор элемента в качестве параметра, находит его в DOM и удаляет из родительского элемента. Теперь, когда вам нужно удалить элемент, вам просто необходимо вызвать removeElement('ваш_id')
, и это упростит вашу работу.
Для удаления одного элемента можно использовать следующий код:
var elem = document.getElementById("yourid");
elem.parentElement.removeChild(elem);
Если вам нужно удалить все элементы с определённым классом, вы можете воспользоваться следующим примером:
var list = document.getElementsByClassName("yourclassname");
for (var i = list.length - 1; 0 <= i; i--) {
if (list[i] && list[i].parentElement) {
list[i].parentElement.removeChild(list[i]);
}
}
Обратите внимание, что мы начинаем итерировать элементы с конца списка, чтобы избежать проблем с изменением длины коллекции при удалении элементов.
Вы можете просто использовать element.remove()
.
Вы можете напрямую удалить этот элемент, используя метод remove()
у объекта DOM.
Вот пример:
let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
// ИЛИ напрямую.
document.getElementById("element_id").remove();
Как узнать, какой элемент DOM имеет фокус?
Как определить, виден ли элемент DOM в текущей области просмотра?
Как выбрать элемент по имени с помощью jQuery?
Удаление всех дочерних элементов узла DOM в JavaScript
Создание нового DOM-элемента из HTML-строки с использованием встроенных методов DOM или Prototype