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

Question

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

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

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

И я беру нужный мне узел так:

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

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

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

myNode.childNodes = new Array();

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

Если вы хотите положить что-то обратно в 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 или .lastChild, функция displayHTML() впоследствии не работает, но с методом .innerHTML проблем нет.

Answer 4

Это чистый 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 ="";

})

Answer 5

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

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

Answer 6

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

parentElement.removeNode(true);

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

Answer 7

с jQuery:

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