Удалить элемент из DOM только из ссылки на элемент

Это либо очень просто, либо невозможно.

Я знаю, что я могу сделать это:

var element = document.getElementById('some_element');
element.parentNode.removeChild(element);

... но это кажется грязным. Есть ли более простой и универсальный способ сделать то же самое?

Кажется, по крайней мере для меня, что-то вроде этого должно быть:

document.getElementById('some_element').remove();

... но это не работает, и поиск в Google/SO не дал никакой альтернативы.

Я знаю, что это не так важно, но parentNode.removeChild() просто чувствует себя хакерской / грязной / неэффективной / плохой практикой-у.

Источник

3 ответа

Решение

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

ИМО универсальный .remove() Метод на самом узле DOM может вводить в заблуждение, в конце концов, мы не удаляем элемент из существования, просто из его родителя.

Вы всегда можете создать свои собственные обертки для этой функциональности. Например

function removeElement(element) {
    element && element.parentNode && element.parentNode.removeChild(element);
}

// Usage:
removeElement( document.getElementById('some_element') );

Или используйте библиотеку DOM, такую ​​как jQuery, которая предоставляет вам множество оберток, например, в jQuery:

$('#some_element').remove();

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

function CoolElement(element) {
    this.element = element;
}

CoolElement.prototype = {
    redify: function() {
        this.element.style.color = 'red';
    },
    remove: function() {
        if (this.element.parentNode) {
            this.element.parentNode.removeChild(this.element);
        }
    }
};

// Usage:

var myElement = new CoolElement( document.getElementById('some_element') );

myElement.redify();
myElement.remove();

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

Источник

Спецификации уровня 4 DOM, похоже, приняли "философию jQuery", заключающуюся в выполнении нескольких операций по изменению DOM (см. https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html)., Удалить это один из них:

var el = document.getElementById("myEl");
el.remove();

В настоящее время он поддерживается только в более поздних версиях Chrome, Opera, Firefox, но есть некоторые шайбы, чтобы исправить это, если вы хотите использовать эту функциональность в производстве сегодня: https://github.com/Raynos/DOM-shim

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

Источник

Ваш код является правильным и лучшим способом сделать это.

JQuery имеет то, что вы ищете:

$("#someId").remove();
Источник
Другие вопросы по тегам