Как удалить javascript

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

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

const h1 = document.querySelector('h1') const parent = h1.parentNode parent.removeChild(h1) // элемента больше нет внутри DOM дерева страницы 

Element: remove() method

The Element.remove() method removes the element from the DOM.

Syntax

remove() 

Parameters

Return value

Examples

Using remove()

div id="div-01">Here is div-01div> div id="div-02">Here is div-02div> div id="div-03">Here is div-03div> 

const element = document.getElementById("div-02"); element.remove(); // Removes the div with the 'div-02' id 

Element.remove() is unscopable

The remove() method is not scoped into the with statement. See Symbol.unscopables for more information.

with (node)  remove(); > // ReferenceError: remove is not defined 

Specifications

Specification
DOM Standard # ref-for-dom-childnode-remove①

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

delete

где результат вычисления выражения должен быть ссылкой на свойство (объекта), например:

delete object.property delete object['property'] delete object[index] delete property // удаляет свойства глобального объекта, или, // используя инструкцию with, свойства объекта, на который ссылается инструкция

Если результат вычисления выражения не является свойством (объекта), delete ничего не делает.

Параметры

Имя объекта или выражение, результатом вычисления которого является объект.

Целое число, представляющее собой индекс массива, который должен быть удалён.

Возвращаемое значение

Возвращает false, только если свойство существует в самом объекте, а не в его прототипах, и не может быть удалено. Во всех остальных случаях возвращает true.

Описание

Если оператор delete успешно выполняет удаление, он полностью удаляет свойство из объекта. Однако, если свойство с таким же именем существует в цепочке прототипов, объект унаследует это свойство из прототипа.

delete эффективен только применительно к свойствам объектов. Он не оказывает никакого влияния на имена переменных и функций. Присвоение значения свойству без указания объекта (без оператора var) иногда неверно характеризуется, как глобальная переменная, (например x = 5 ). На самом деле происходит присвоение значения свойству глобального объекта.

delete не может удалить определённые свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как DontDelete.

= 42; // создаёт свойство x в глобальном объекте var y = 43; // объявляет новую переменную, y myobj = >; myobj.h = 4; // создаёт свойство h в myobj myobj.k = 5; // создаёт свойство k в myobj delete x; // возвращает true (x - свойство глобального объекта и может быть удалено) delete y; // возвращает false (delete не влияет на имена переменных) delete Math.PI; // возвращает false (delete не влияет на определённые встроенные свойства) delete myobj.h; // возвращает true (свойства, определённые пользователем могут быть удалены) with (myobj)  delete k; // возвращает true (эквивалентно delete myobj.k) > delete myobj; // возвращает true (myobj это свойство глобального объекта, не переменная, поэтому может быть удалено) 

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

function Foo() > Foo.prototype.bar = 42; var foo = new Foo(); delete foo.bar; // возвращает true, но безрезультатно, так как bar - наследуемое свойство alert(foo.bar); // выводит 42, свойство все ещё наследуется delete Foo.prototype.bar; // удаляет свойство из прототипа alert(foo.bar); // выводит "undefined", свойство больше не наследуется 

Удаление элементов массива

Когда с помощью оператора delete удаляется элемент массива, длина массива не меняется. Например, если вы удалите a[3] , a[4] по прежнему a[4] , а a[3] не определено. Так будет даже если вы удалите последний элемент массива ( delete a[a.length-1] ).

Когда оператор delete удаляет элемент массива, этот элемент больше не существует в массиве. В следующем примере, trees[3] удаляется с помощью delete .

const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; console.log(3 in trees); // false 

Если вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение undefined вместо оператора delete . В следующем примере, trees[3] принимает значение undefined, но элемент массива все ещё существует:

const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; console.log(3 in trees); // true 

Проблема кроссбраузерности

Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе «свойство добавленное в объект раньше идёт раньше» (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует delete с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей старой позиции, а не в конце итерационной последовательности, как ожидается.

Поэтому, если вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придётся либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.

Внешние ссылки

• Глубокий анализ оператора delete

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Как удалить элемент с помощью JavaScript

Веб технологии, на сегодняшний день, развиваются как никогда стремительно, а вместе с ними растут требования пользователей и сложность сайтов. Статический HTML сайт уже считается чем-то очень древним и неинтересным, современный пользователь требует интерактивности. А интерактивность в свою очередь, технически означает манипуляции HTML элементами в дереве DOM.

В этой статье рассмотрим, как можно удалить элемент и какие для этого есть варианты. Предположим, что у нас есть такой элемент, который нужно удалить со страницы:

Element to remove

Удаление элемента с jQuery

Библиотека jQuery была очень популярна в свое время и даже по сей день активно используется многими веб разработчиками. Если сайт на WordPress, то там с большой вероятностью используется jQuery.

И так, если вы используете jQuery, то, для удаления элемента, можно применить метод remove() :

$('#my-element').remove();

Все, крайне просто. Вы выбираете нужный элемент, в данном случае это элемент с id=»my-element» и используете метод remove() .

Старый метод

Надежный способ удаления элемента со страницы, который точно работает если вы используете стандарт ES5 и поддерживается всеми браузерами даже включая самый старый Internet Explorer, следующий:

var elementToRemove = document.getElementById('my-element');
elementToRemove.parentNode.removeChild(elementToRemove);

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

Новый метод

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

const elementToRemove = document.getElementById('my-element');
elementToRemove.remove();

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

На этом все, это были три способа удалить элемент с помощью JavaScript.