Как мне удалить все дочерние элементы узла DOM в JavaScript?

Скажем, у меня есть следующий (безобразный) HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

И я беру узел, который я хочу, вот так:

var myNode = document.getElementById("foo");

Как я мог удалить детей fooтак, чтобы просто <p id="foo"></p>осталось?

Могу ли я просто сделать:

myNode.childNodes = new Array();

или я должен использовать какую-то комбинацию removeElement?

Я хотел бы, чтобы ответ был прямым DOM; хотя дополнительные баллы, если вы также предоставляете ответ в jQuery вместе с ответом только для DOM.

Вариант 1 А: Клиринг innerHTML.

• Этот подход прост, но может не подойти для высокопроизводительных приложений, потому что он вызывает HTML-анализатор браузера (хотя браузеры могут оптимизировать для случая, когда значение является пустой строкой).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

Вариант 1 B: Клиринг textContent

• Как указано выше, но используйте .textContent. Согласно MDN это будет быстрее, чем innerHTMLкогда браузеры не будут вызывать свои HTML-парсеры и вместо этого сразу же заменят все дочерние элементы одного #textузла.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

Вариант 2 A: Цикл для удаления каждого lastChild:

• Использовалось более раннее редактирование этого ответа firstChild, но оно обновлено для использования, lastChildкак в информатике, в целом , значительно быстрее удалить последний элемент коллекции, чем удалить первый элемент (в зависимости от того, как реализована коллекция). ).
• Цикл продолжает проверять firstChild только в случае , если проверка выполняется быстрее, firstChildчем lastChild(например, если список элементов реализован как направленный связанный список UA).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

Вариант 2 B: Цикл для удаления каждого lastElementChild:

• Этот подход сохраняет все не Element(а именно #textузлы и<!-- comments --> ) дочерние элементы родителя (но не их потомков) - и это может быть желательно в вашем приложении (например, некоторые системы шаблонов, которые используют встроенные комментарии HTML для хранения инструкций шаблона).
• Этот подход не использовался до последних лет, так как Internet Explorer только добавил поддержку lastElementChildв IE9.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

Бонус: Element.clearChildrenобезьяна-патч:

• Мы можем добавить новое свойство-метода к Elementпрототипу в JavaScript, чтобы упростить его вызов просто el.clearChildren()(где elнаходится любой объект HTML-элемента).
• (Строго говоря, это «обезьяна-патч», а не полифилл, поскольку это не стандартная функция DOM или отсутствующая функция. Обратите внимание, что во многих ситуациях использование «обезьяны-патчи» по праву не рекомендуется.)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

В настоящее время принят неправильный ответ о том, innerHTMLчто он медленнее (по крайней мере, в IE и Chrome), как правильно заметил m93a.

Chrome и FF значительно быстрее, используя этот метод (который уничтожит прикрепленные данные jquery):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

в отдаленную секунду для FF и Chrome, и самый быстрый в IE:

node.innerHTML = '';

InnerHTML не разрушит ваши обработчики событий и не нарушит ссылки на jquery , также рекомендуется в качестве решения здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

Самый быстрый метод манипулирования DOM (все еще медленнее, чем предыдущие два) - это удаление Range, но диапазоны не поддерживаются до IE9.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

Другие упомянутые методы кажутся сопоставимыми, но намного медленнее, чем innerHTML, за исключением выброса jquery (1.1.1 и 3.1.1), который значительно медленнее, чем что-либо еще:

$(node).empty();

Доказательства здесь:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- дом-узел-в-JavaScript (новый URL для перезагрузки jsperf, потому что редактирование старого URL не работает)

«Цикл за тест» в Jsperf часто понимается как «за итерацию», и только у первой итерации есть узлы для удаления, поэтому результаты не имеют смысла, на момент публикации в этом потоке были неправильно настроены тесты.

Используйте современный Javascript, с remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

Это более новый способ записи удаления узла в ES5. Это ванильный JS и много читает лучше, чем предыдущие версии.

Большинство пользователей должны иметь современные браузеры, или вы можете перейти вниз, если это необходимо.

Поддержка браузеров - 95% декабрь 2019

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

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

$('#foo').empty();

JQuery .empty()метод гарантирует , что любые данные , которые JQuery , связанные с элементами удаляются будут очищены.

Если вы просто используете DOMметоды удаления детей, эти данные останутся.

Если вы используете jQuery:

$('#foo').empty();

Если вы этого не сделаете:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

Быстрейший...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Спасибо Андрею Лушникову за ссылку на jsperf.com (классный сайт!).

РЕДАКТИРОВАТЬ: чтобы быть ясным, нет никакой разницы в производительности в Chrome между firstChild и lastChild. Верхний ответ показывает хорошее решение для производительности.

Если вы хотите иметь только узел без его дочерних элементов, вы также можете сделать его копию следующим образом:

var dupNode = document.getElementById("foo").cloneNode(false);

Зависит от того, что вы пытаетесь достичь.

Вот еще один подход:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

Это как innerText, кроме стандартного. Это немного медленнее, чем removeChild(), но проще в использовании и не будет иметь большого значения для производительности, если у вас нет слишком много материала для удаления.

В ответ на DanMan, Мартен и Мэтт. Клонирование узла для установки текста действительно является жизнеспособным способом в моих результатах.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

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

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

Я считаю этот метод очень полезным при замене строки внутри элемента, если вы не уверены, что будет содержать этот узел, вместо того, чтобы беспокоиться о том, как убрать беспорядок, начните сначала.

Вот что я обычно делаю:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

И вуаля, позже вы можете очистить любой элемент DOM с помощью:

anyDom.empty()

Для этого есть несколько вариантов:

Быстрейший ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Альтернативы (медленнее):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Бенчмарк с предложенными опциями

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

Это удалит все узлы в элементе.

innerText - победитель! http://jsperf.com/innerhtml-vs-removechild/133 . Во всех предыдущих тестах внутренний dom родительского узла удалялся на первой итерации, а затем innerHTML или removeChild, где применялся к пустому div.

Самый простой способ удаления дочерних узлов узла через Javascript

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

я видел, как люди делают:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

тогда кто-то сказал, используя el.lastNode быстрее

Однако я думаю, что это самый быстрый:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

что вы думаете?

PS: эта тема была спасением для меня. мой аддон Firefox был отклонен, потому что я использовал innerHTML. Это стало привычкой в ​​течение длительного времени. тогда я осуждаю это. и я на самом деле заметил разницу в скорости. при загрузке innerhtml потребовалось некоторое время, чтобы обновиться, однако, благодаря addElement, его моментально!

Использование цикла диапазона кажется мне наиболее естественным:

for (var child of node.childNodes) {
    child.remove();
}

Согласно моим измерениям в Chrome и Firefox, он примерно в 1,3 раза медленнее. В обычных условиях это, возможно, не будет иметь значения.

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

Как правило, JavaScript использует массивы для ссылки на списки узлов DOM. Таким образом, это будет хорошо работать, если вы заинтересованы в этом через массив HTMLElements. Кроме того, стоит отметить, потому что я использую ссылку на массив вместо прототипа JavaScript, это должно работать в любом браузере, включая IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

Почему мы не следуем простейшему методу «удалить», зацикленному внутри while.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• Выбор родительского div
• Использование метода «remove» внутри цикла While для удаления первого дочернего элемента, пока не останется ни одного.

Просто видел, как кто-то упомянул этот вопрос в другом, и подумал, что я добавлю метод, которого я еще не видел:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

Функция clear берет элемент и использует родительский узел для замены себя копией без дочерних элементов. Небольшой выигрыш в производительности, если элемент редкий, но когда элемент имеет несколько узлов, выигрыш в производительности реализуется.

Функциональный подход:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

«childNodes» в domChildren выдаст нодлист из ближайших дочерних элементов, который пуст, когда ничего не найдено. Чтобы отобразить нодлист, domChildren преобразует его в массив. domEmpty отображает функцию domRemove на все элементы, которая удаляет ее.

Пример использования:

domEmpty(document.body)

удаляет всех детей из элемента тела.

Другие способы в jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

просто только IE:

parentElement.removeNode(true);

true - означает сделать глубокое удаление - что означает, что все дети также удалены

Самый простой способ:

let container = document.getElementById("containerId");
container.innerHTML = "";

простое и быстрое использование для цикла !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

это не будет работать в <span>теге!

Если вы хотите что-то вложить в это div, innerHTMLвероятно, лучше.

Мой пример:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

Если я использую метод .firstChildили, функция не работает впоследствии, но нет проблем с методом..lastChilddisplayHTML().innerHTML

Это чистый JavaScript, я не использую jQuery, но работает во всех браузерах, даже в IE, и он очень прост для понимания

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

с помощью jQuery:

$("#foo").find("*").remove();