Удалить элемент по идентификатору

Ответ 1

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

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

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

Ответ 2

Я знаю, что расширение собственных функций 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.

Ответ 3

Crossbrowser и IE> = 11:

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

Ответ 4

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

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

Ответ 5

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

Ответ 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]);

Ответ 7

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

Ответ 8

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

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

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

https://jsfiddle.net/52kp584L/

**

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

**

Ответ 9

  Необходимость сначала перейти к родительскому узлу кажется мне немного странной, есть ли причина, по которой 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. Я считаю, что это стоит заметить :)

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

Ответ 10

Функции, которые используют элемент 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-форм или интерактивных элементов GUI было едва мерцающим в какой-то глаз разработчика.

Ответ 11

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

http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/

Ответ 12

Прибытие в родительский node сначала кажется мне немного странным, есть ли причина, по которой работает JavaScript?

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

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

Ответ 13

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

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

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

Я считаю, что, когда они поняли эту проблему, работа над ней заключалась в том, чтобы удалить элемент через родителя, потому что когда элемент исчез, теперь вы просто держите ссылку на родителя. Это остановило бы всю эту неприятность, и (если, например, закрытие дерева node на node) было бы "zip-up" довольно приятным.

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

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

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

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

Ответ 14

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

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

Ответ 15

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

Ответ 16

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

вот пример:

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

Ответ 17

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

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

Примечание к EObj=document.getElementById(EId).

Это знак равенства ONE не ==.

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

Ответ 18

Вы можете попробовать следующий код:

<body>
    <div>
        <p id="one">The 1st line.</p>
        <p id="two">The 2nd line.</p>
        <p id="three">The 3rd line.</p>
        <button>Remove the 3rd line.</button>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                $("#three").remove();
            });
        });
    </script>
</body>

Подробнее см. http://api.jquery.com/remove/.