Подтвердить что ты не робот

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

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

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

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

Это edit соответствует вашему комментарию, в котором вы спрашивали о возможности расширения собственной реализации 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, а не только отдельный элемент, как указано выше.

Ответ 2

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

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

$("#someId").remove();

Ответ 3

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

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

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

Удерживайте его предпочтительнее removeChild или нет, теперь я оставлю undebated.