Удалить элемент dom, не зная его родителя?

Можно ли удалить элемент dom, у которого нет родителя, кроме тега body? Я знаю, что это будет легко с фреймворком, например, jQuery, но я пытаюсь придерживаться прямого javascript.

Здесь код, который я нашел, в противном случае:

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

Спасибо!

Ответы

Ответ 1

Вы должны иметь возможность получить родительский элемент, а затем удалить элемент из этого

function removeElement(el) {
el.parentNode.removeChild(el);
}

Обновление

Вы можете установить это как новый метод в HTMLElement:

HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }

И затем сделайте el.remove() (который также вернет элемент)

Ответ 2

Я думаю, вы можете сделать что-то вроде...

var child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);

Подробнее см. node.parentNode.

Ответ 3

childDiv.remove();

работает в Chrome 25.0.1364.155

Обратите внимание, что это не работает в IE11 или Opera Mini, но поддерживается всеми другими браузерами.

Смотрите здесь: ссылка на childnode-remove on caniuse

Ответ 4

document.body.removeChild(child);

Ответ 5

Удаление элемента с использованием свойства outerHTML

remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

function remElement(obj) {
obj.outerHTML="";
}

Ответ 6

Эта функция просто удаляет элемент с помощью id:

function removeElement (id) { 
  document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}

Ответ 7

ОК, вам в принципе не нужно знать родителя, чтобы удалить элемент DOM из DOM, посмотрите на код ниже, посмотрите, как порядок удаления элемента node в JavaScript:

Element + parentNode + removeChild(Element);

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

Итак, теперь посмотрите реальный код:

var navigation = document.getElementById('navigation');
if(navigation) {
  navigation.parentNode.removeChild(navigation);
}

или как функция

function removeNode(element) {
  if(element) { //check if it not null
    element.parentNode.removeChild(element);
  } 
} //call it like : removeNode(document.getElementById('navigation'));

Также jQuery имеет функцию remove(), которая широко используется, например:

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

Также есть встроенный ChildNode.remove(), который не находится в IE и старых браузерах, но вы можете polyfill его, посмотрите предлагаемый polyfill из MDN:

Polyfill
Вы можете polyfill метод remove() в Internet Explorer 9 и выше со следующим кодом:

//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

Если вам нравится больше узнать об этом, посетите ссылка в MDN.