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

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

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

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

Я знаю, что расширение встроенных функций 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()пришло на помощь и может быть использовано следующим образом (без polyfill выше):

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

или

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

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

Crossbrowser и IE> = 11:

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

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

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

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

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

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

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

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

 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()

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

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

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

https://jsfiddle.net/52kp584L/

**

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

**

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

вот пример:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Согласно DOM уровню 4 спецификации, которая является текущей версией в разработке, есть некоторые новые методы удобно мутаций доступны: append(), prepend(), before(), after(), replace(), и remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

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

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

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

Пример:

// 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. Я считаю, что это стоит заметить :)

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

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

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

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

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

ИМХО: причина этого та же, что и в других средах: вы выполняете действие, основанное на вашей «связи» с чем-либо. Вы не можете удалить его, пока вы связаны с ним.

Как резать ветку дерева. Во время резки садитесь на сторону, ближайшую к дереву, или результат будет ... неудачным (хотя и смешным).

Это на самом деле происходит от FireFox ... на этот раз, IE был впереди пакета и позволил удалить элемент напрямую.

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

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

Я полагаю, что когда они поняли проблему, обходной путь заключался в том, чтобы удалить элемент через его родительский элемент, потому что, когда элемент ушел, вы теперь просто держите ссылку на родительский элемент. Это остановит всю эту неприятность, и (если, например, закрыть узел дерева узлом) будет довольно просто «застегнут».

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

Опять же, все это просто мои догадки.

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

Вероятно, на следующий день после того, как мой слуга-робот подал в суд на меня с зарплатой.

Из того, что я понимаю, удаление узла напрямую не работает в Firefox, только Internet Explorer. Итак, чтобы поддержать Firefox, вы должны обратиться к родителю, чтобы удалить его дочерний элемент.

Ссылка: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

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

Это лучшая функция для удаления элемента без ошибки скрипта:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Обратите внимание на EObj=document.getElementById(EId).

Это ОДИН знак равенства нет ==.

если элемент EIdсуществует, то функция удаляет его, в противном случае возвращает false error.