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

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

Crossbrowser и IE >= 11:

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

вы могли бы сделать

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

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

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

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

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

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

https://jsfiddle.net/52kp584L/

**

нет необходимости расширять список узлов. Он уже реализован.

**

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ref: 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.