Удалить элемент по 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 = "";

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

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

это то, что поддерживает 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()

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

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

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

https://jsfiddle.net/52kp584L/

**

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

**

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

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

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

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

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

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

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

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

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

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

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

из того, что я понимаю, удаление узла напрямую не работает в 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.