Есть ли способ полностью удалить HTML-элемент с помощью Javascript?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Возможно ли удалить HTML-элемент из разметки напрямую с помощью Javascript / jQuery / Ajax вместо использования CSS display: none ?

Комментарии:

1. Просто немного педантично, но вы не совсем удаляете его из разметки — вы удаляете его из объектной модели документа. Разметка — это просто текст, передаваемый по проводам.

Ответ №1:

ДА

JavaScript

 var parent = document.getElementById('parentElementID');
var child = document.getElementById('childElementID');
parent.removeChild(child);
  

jQuery

 $('#parentElementID').remove('#childElementID');
  

Комментарии:

1. или еще проще $('#childElementId').remove()

2. Согласен, хотел быть более описательным. Всегда предлагайте провести как можно больший рефакторинг.

3. или с помощью «ванильного» js и без необходимости «знать» родительский элемент child.parentNode.removeChild(child)

4. Я знаю, что это было некоторое время назад, и теперь есть новый .remove() для Vanilla JS, который не работает в IE, поэтому remove .removeChild() — лучший кроссбраузерный. И я знаю, что в последнее время jQuery подвергается критике за то, что он недостаточно хорош или является помехой, но jQuery просто упрощает это. План и простота.

Ответ №2:

 element.parentNode.removeChild(element)
  

Ответ №3:

Это старый вопрос, поэтому ответы несколько устарели. Раньше для удаления элемента вы получали родительский узел, элемент и использовали removeChild() , как предлагали другие:

 element.parentNode.removeChild(element);    
  

Хотя это все еще вполне приемлемо, теперь вы можете удалить узел напрямую:

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

 document.getElementById('remove-button').addEventListener('click', function() {
    document.getElementById('container').remove();
});  
 #container {
  width:50px;
  height:50px;
  background-color:#bada55;
}  
 <div id="container"></div>
<button id="remove-button">Remove</button>  

Комментарии:

1. Я знаю, что это было некоторое время назад, и теперь есть новый .remove() для Vanilla JS, и я согласен с этим ответом и проголосовал за него, и это не работает в IE, поэтому .removeChild () — лучший кроссбраузерный, если вы по той или иной причине все еще поддерживаете IE. И я знаю, что в последнее время jQuery подвергается критике за то, что он недостаточно хорош или является помехой, но jQuery просто упрощает кроссбраузерную поддержку. Спасибо за обновление ответа тоже.

Ответ №4:

ДА. Вы могли бы использовать jQuery remove() API.

Ответ №5:

собственный javascript:

     var toremove = document.getElementById('hd');
    toremove.parentNode.removeChild(toremove);
  

Или в jquery просто используйте

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