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

Question

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

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

Необходимость сначала перейти к родительскому узлу кажется мне немного странной, есть ли причина, по которой JavaScript работает следующим образомэто?

Answer 1

Я знаю, что расширение собственных функций DOM не всегда является лучшим или наиболее популярным решением, но для современных браузеров это прекрасно работает.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

И тогда вы можете удалить такие элементы, как этот

document.getElementById("my-element").remove();

или

document.getElementsByClassName("my-elements").remove();

Примечание: это решение не работает для IE 7 и ниже. Подробнее о расширении DOM читайте в этой статье .

РЕДАКТИРОВАТЬ : Изучив мой ответ в 2019 году, node.remove() пришел на помощь и может быть использован следующим образом (без полизаполнения выше):

document.getElementById("my-element").remove();

или

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

Эти функции доступны во всех современных браузерах (кроме IE). Подробнее о MDN .

Answer 2

Кроссбраузер и IE> = 11:

document.getElementById("element-id").outerHTML = "";

Answer 3

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

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

Answer 4

Это то, что DOM поддерживает . Найдите на этой странице слова «удалить» или «удалить», и removeChild является единственным, который удаляет узел.

Answer 5

DOM организован в виде дерева узлов, где каждый узел имеет значение вместе со списком ссылок на его дочерние узлы.Так что element.parentNode.removeChild(element) точно имитирует то, что происходит внутри: сначала вы переходите на родительский узел, а затем удаляете ссылку на дочерний узел.

Начиная с DOM4, предоставляется вспомогательная функция, которая делает то же самое: element.remove().Это работает в 87% браузеров (по состоянию на 2016 г.), но не в IE 11. Если вам требуется поддержка старых браузеров, вы можете:

• Удалить элементы через родительский узел, как в вопрос ,
• изменить собственные функции DOM, как в ответ Йохана Деттмара , или
• использовать DOM4 polyfill.

Answer 6

Для удаления одного элемента:

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

Answer 7

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

Answer 8

Метод ChildNode.remove() удаляет объект из дерева, которому он принадлежит.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Вот скрипка, показывающая, как можно вызвать document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Нет необходимости расширять NodeList.Уже реализовано.

**

Answer 9

Необходимость сначала перейти к родительскому узлу кажется мне немного странной, есть ли причина, по которой JavaScript работает следующим образом?

Имя функции - removeChild(), и как можно удалить дочернего элемента, когда его нет? :)

С другой стороны, вам не всегда нужно звонить так, как вы показали. element.parentNode является только помощником для получения родительского узла данного узла. Если вы уже знаете родительский узел, вы можете просто использовать его так:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

=============================================== ==========

Чтобы добавить что-то еще:

В некоторых ответах указано, что вместо parentNode.removeChild(child); вы можете использовать elem.remove();. Но, как я заметил, между этими двумя функциями есть разница, и она не упоминается в этих ответах.

Если вы используете removeChild(), он вернет ссылку на удаленный узел.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Но если вы используете elem.remove();, он не вернет вам ссылку.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Такое поведение наблюдается в Chrome и FF. Я верю, что стоит заметить:)

Надеюсь, мой ответ придаст этому вопросу некоторую ценность и будет полезен !!

Answer 10

Функции, использующие ele.parentNode.removeChild (ele), не будут работать для элементов, которые вы создали, но еще не вставили в HTML. Библиотеки, такие как jQuery и Prototype, разумно используют метод, подобный следующему, чтобы обойти это ограничение.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Я думаю, что JavaScript работает так, потому что первоначальные дизайнеры DOM считали родительскую / дочернюю и предыдущую / следующую навигацию более приоритетными, чем модификации DHTML, которые так популярны сегодня. Возможность читать из одного и записывать в другое по относительному расположению в DOM была полезна в середине 90-х годов, когда динамическая генерация целых HTML-форм или интерактивных элементов графического интерфейса была едва заметной какой-то глаз разработчика.