Как удалить элемент html через js

Аватар пользователя Nikolai Gagarinov
Nikolai Gagarinov
04 апреля 2022

Удалить элемент из html достаточно просто.

Нужно воспользоваться методом document.querySelector() и найти нужный элемент по селектору. Далее вызвать у родителя нужного элемента метод removeChild(), передав ему элемент.

Пример ниже:


const h1 = document.querySelector('h1')

const parent = h1.parentNode

parent.removeChild(h1)
// элемента больше нет внутри DOM дерева страницы
1 0
Аватар пользователя Ivan Mamtsev
Ivan Mamtsev
22 августа 2024

Чтобы удалить элемент HTML через JavaScript, можно использовать метод remove() или removeChild():

const element = document.getElementById('myElement');
element.remove();

Метод remove() удаляет элемент напрямую. Однако, он не поддерживается в очень старых браузерах.

Как альтернативный способ мы можем использовать removeChild():

const element = document.getElementById('myElement');
element.parentNode.removeChild(element);

Здесь мы сначала получаем родителский элемент, а затем удаляем из него наш целевой элемент.

Также, если вы работаете с динамичски созданными элементами, проверяйте их существование перед удалением. Так можно избежать ошибок, если элемент еще не создан или уже был удален.

const element = document.getElementById('myElement');
if (element) {
    element.remove();
}
0 0
Познакомьтесь с основами JavaScript бесплатно