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

Question

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

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

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

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

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

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

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

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

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

---

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

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

JQuery имеет what you're looking for:

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

Answer 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

Wether предпочтительнее removeChild или нет, на данный момент я оставляю undebated.