13

Удаление элемента по ID

13

Когда вы удаляете элемент с помощью стандартного JavaScript, необходимо сначала обратиться к родительскому элементу:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Обращение к родительскому узлу перед удалением элемента кажется мне немного странным. Есть ли причина, по которой JavaScript работает именно так?

5 ответ(ов)

3

Чтобы удалить элемент из 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, что может быть менее предсказуемо в различных браузерах.

1

Вы можете создать функцию remove, чтобы вам не приходилось каждый раз об этом думать:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

Эта функция принимает идентификатор элемента в качестве параметра, находит его в DOM и удаляет из родительского элемента. Теперь, когда вам нужно удалить элемент, вам просто необходимо вызвать removeElement('ваш_id'), и это упростит вашу работу.

0

Для удаления одного элемента можно использовать следующий код:

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

Обратите внимание, что мы начинаем итерировать элементы с конца списка, чтобы избежать проблем с изменением длины коллекции при удалении элементов.

0

Вы можете просто использовать element.remove().

0

Вы можете напрямую удалить этот элемент, используя метод remove() у объекта DOM.

Вот пример:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
// ИЛИ напрямую.
document.getElementById("element_id").remove();
Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь