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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

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

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

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

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

---

This 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, а не просто отдельный элемент, как описано выше.

Answer 2

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

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

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

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

Answer 3

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

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

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