Làm cách nào để xóa tất cả các phần tử con của nút DOM trong JavaScript?

Nói rằng tôi có HTML (xấu xí) sau:

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

Và tôi lấy nút tôi muốn như vậy:

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

Làm thế nào tôi có thể loại bỏ những đứa trẻ foođể chỉ <p id="foo"></p>còn lại?

Tôi chỉ có thể làm:

myNode.childNodes = new Array();

hoặc tôi nên sử dụng một số kết hợp removeElement?

Tôi muốn câu trả lời là thẳng lên DOM; mặc dù có thêm điểm nếu bạn cũng cung cấp câu trả lời trong jQuery cùng với câu trả lời chỉ có DOM.

Phương án 1 A: Xóa innerHTML.

• Cách tiếp cận này đơn giản, nhưng có thể không phù hợp với các ứng dụng hiệu suất cao vì nó gọi trình phân tích cú pháp HTML của trình duyệt (mặc dù các trình duyệt có thể tối ưu hóa cho trường hợp giá trị là một chuỗi rỗng).

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>

Tùy chọn 1 B: Xóa textContent

• Như trên, nhưng sử dụng .textContent. Theo MDN, điều này sẽ nhanh hơn innerHTMLvì các trình duyệt sẽ không gọi trình phân tích cú pháp HTML của họ và thay vào đó sẽ ngay lập tức thay thế tất cả các phần tử con của một phần tử bằng một #textnút.

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>

Tùy chọn 2 A: Vòng lặp để loại bỏ mọi lastChild:

• Một chỉnh sửa trước đó cho câu trả lời này đã được sử dụng firstChild, nhưng điều này được cập nhật để sử dụng lastChildnhư trong khoa học máy tính, nói chung , việc loại bỏ phần tử cuối cùng của bộ sưu tập nhanh hơn đáng kể so với cách loại bỏ phần tử đầu tiên (tùy thuộc vào cách thực hiện bộ sưu tập ).
• Vòng lặp tiếp tục kiểm tra firstChild chỉ trong trường hợp kiểm tra nhanh firstChildhơn lastChild(ví dụ: nếu danh sách thành phần được triển khai dưới dạng danh sách liên kết được định hướng bởi 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>

Tùy chọn 2 B: Vòng lặp để loại bỏ mọi lastElementChild:

• Cách tiếp cận này bảo tồn tất cả các con không phải Element(cụ thể là #textnút và <!-- comments -->) của cha mẹ (nhưng không phải con cháu của họ) - và điều này có thể được mong muốn trong ứng dụng của bạn (ví dụ: một số hệ thống tạo khuôn mẫu sử dụng nhận xét HTML nội tuyến để lưu trữ hướng dẫn mẫu).
• Cách tiếp cận này không được sử dụng cho đến những năm gần đây vì Internet Explorer chỉ thêm hỗ trợ cho lastElementChildIE9.

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>

Tiền thưởng: Element.clearChildrenkhỉ-patch:

• Chúng ta có thể thêm một thuộc tính phương thức mới vào Elementnguyên mẫu trong JavaScript để đơn giản hóa việc gọi nó tới el.clearChildren()(nơi elcó bất kỳ đối tượng phần tử HTML nào ).
• (Nói đúng ra đây là một bản vá khỉ, không phải là một polyfill, vì đây không phải là một tính năng DOM tiêu chuẩn hoặc tính năng bị thiếu.

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>

Câu trả lời hiện được chấp nhận là sai về innerHTMLviệc chậm hơn (ít nhất là trong IE và Chrome), như m93a đã đề cập chính xác.

Chrome và FF nhanh hơn đáng kể khi sử dụng phương pháp này (sẽ phá hủy dữ liệu jquery đính kèm):

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

trong một giây xa cho FF và Chrome và nhanh nhất trong IE:

node.innerHTML = '';

InternalHTML sẽ không phá hủy trình xử lý sự kiện của bạn hoặc ngắt các tham chiếu jquery , nó cũng được đề xuất như một giải pháp tại đây: https://developer.mozilla.org/en-US/docs/Web/API/Euity.innerHTML .

Phương thức thao tác DOM nhanh nhất (vẫn chậm hơn hai lần trước) là loại bỏ Phạm vi, nhưng phạm vi không được hỗ trợ cho đến IE9.

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

Các phương thức khác được đề cập có vẻ tương đương, nhưng chậm hơn rất nhiều so với InternalHTML, ngoại trừ jquery (1.1.1 và 3.1.1) ngoại lệ, chậm hơn đáng kể so với mọi thứ khác:

$(node).empty();

Bằng chứng ở đây:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (url mới để khởi động lại jsperf vì chỉnh sửa url cũ không hoạt động)

"Mỗi vòng kiểm tra" của Jsperf thường được hiểu là "mỗi lần lặp" và chỉ lần lặp đầu tiên có các nút để loại bỏ nên kết quả là vô nghĩa, tại thời điểm đăng bài có các bài kiểm tra trong luồng này được thiết lập không chính xác.

Sử dụng Javascript hiện đại, với remove!

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

Đây là một cách mới hơn để viết loại bỏ nút trong ES5. Đó là vani JS và đọc nhiều đẹp hơn phiên bản trước.

Hầu hết người dùng nên có trình duyệt hiện đại hoặc bạn có thể chuyển xuống nếu cần.

Hỗ trợ trình duyệt - 95% tháng 12 năm 2019

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

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

Nếu có bất kỳ cơ hội nào mà bạn có con cháu bị ảnh hưởng bởi jQuery, thì bạn phải sử dụng một số phương pháp sẽ dọn sạch dữ liệu jQuery.

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

.empty()Phương thức jQuery sẽ đảm bảo rằng mọi dữ liệu mà jQuery liên kết với các phần tử bị xóa sẽ được xóa sạch.

Nếu bạn chỉ đơn giản sử dụng DOMcác phương pháp loại bỏ trẻ em, dữ liệu đó sẽ vẫn còn.

Nếu bạn sử dụng jQuery:

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

Nếu bạn không:

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

Nhanh nhất...

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

Cảm ơn Andrey Lushnikov vì đã liên kết đến jsperf.com (trang web tuyệt vời!).

EDIT: rõ ràng, không có sự khác biệt về hiệu suất trong Chrome giữa FirstChild và lastChild. Câu trả lời hàng đầu cho thấy một giải pháp tốt cho hiệu suất.

Nếu bạn chỉ muốn có nút mà không có con của nó, bạn cũng có thể tạo một bản sao của nút như thế này:

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

Phụ thuộc vào những gì bạn đang cố gắng để đạt được.

Đây là một cách tiếp cận khác:

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 = '';

Nó giống như trong nội bộ, ngoại trừ tiêu chuẩn. Nó chậm hơn một chútremoveChild() , nhưng nó dễ sử dụng hơn và sẽ không tạo ra nhiều sự khác biệt về hiệu suất nếu bạn không có quá nhiều thứ để xóa.

Đáp lại DanMan, Maarten và Matt. Nhân bản một nút, để đặt văn bản thực sự là một cách khả thi trong kết quả của tôi.

// @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 );

Ngoài ra, điều này hoạt động cho các nút không nằm trong dom mà trả về null khi cố gắng truy cập vào ParentNode. Ngoài ra, nếu bạn cần an toàn, một nút trống trước khi thêm nội dung thì điều này thực sự hữu ích. Hãy xem xét trường hợp sử dụng bên dưới.

// @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 );

Tôi thấy phương pháp này rất hữu ích khi thay thế một chuỗi bên trong một phần tử, nếu bạn không chắc nút đó sẽ chứa gì, thay vì lo lắng làm thế nào để dọn dẹp mớ hỗn độn, hãy bắt đầu làm mới.

Đây là những gì tôi thường làm:

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

Và voila, sau này bạn có thể làm trống bất kỳ phần tử dom nào với:

anyDom.empty()

Có một số lựa chọn để đạt được điều đó:

Nhanh nhất ():

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

Các lựa chọn thay thế (chậm hơn):

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

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

Điểm chuẩn với các tùy chọn được đề xuất

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
        }
    }
}

Điều này sẽ loại bỏ tất cả các nút trong phần tử.

InternalText là người chiến thắng! http://jsperf.com/innerhtml-vs-removechild/133 . Tại tất cả các thử nghiệm trước đó, dom bên trong của nút cha đã bị xóa ở lần lặp đầu tiên và sau đó bên trongHTML hoặc removeChild khi áp dụng cho div trống.

Cách đơn giản nhất để loại bỏ các nút con của một nút thông qua Javascript

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

tôi thấy mọi người đang làm:

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

sau đó ai đó nói sử dụng el.lastNodenhanh hơn

tuy nhiên tôi sẽ nghĩ rằng đây là cách nhanh nhất:

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

bạn nghĩ sao?

ps: chủ đề này là một cứu tinh cho tôi. addon firefox của tôi đã bị từ chối vì tôi đã sử dụng InternalHTML. Đó là một thói quen trong một thời gian dài. sau đó tôi foudn này. và tôi thực sự nhận thấy một sự khác biệt tốc độ. khi tải phần mềm inthtml mất một lúc để cập nhật, tuy nhiên, bằng cách thêm phần bổ sung ngay lập tức!

Sử dụng một vòng lặp phạm vi cảm thấy tự nhiên nhất đối với tôi:

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

Theo số đo của tôi trong Chrome và Firefox, nó chậm hơn khoảng 1,3 lần. Trong trường hợp bình thường, điều này có lẽ sẽ không quan trọng.

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

Nói chung, JavaScript sử dụng mảng để tham chiếu danh sách các nút DOM. Vì vậy, điều này sẽ hoạt động tốt nếu bạn có hứng thú thực hiện nó thông qua mảng HTMLElements. Ngoài ra, đáng chú ý, bởi vì tôi đang sử dụng một tham chiếu mảng thay vì JavaScript proto, điều này sẽ hoạt động trong bất kỳ trình duyệt nào, kể cả IE.

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

Tại sao chúng ta không làm theo phương pháp đơn giản nhất ở đây "loại bỏ" được lặp bên trong.

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

• Chọn div cha
• Sử dụng phương thức "remove" bên trong vòng lặp While để loại bỏ phần tử con đầu tiên, cho đến khi không còn phần nào.

Chỉ cần thấy ai đó đề cập đến câu hỏi này trong một câu hỏi khác và nghĩ rằng tôi sẽ thêm một phương pháp mà tôi chưa thấy:

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

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

Hàm rõ ràng là lấy phần tử và sử dụng nút cha để thay thế chính nó bằng một bản sao mà không có phần tử con. Hiệu suất không tăng nhiều nếu phần tử thưa thớt nhưng khi phần tử có một loạt các nút thì hiệu suất đạt được được thực hiện.

Phương pháp chỉ có chức năng:

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

"childNodes" trong domChildren sẽ cung cấp một nútList của các phần tử con ngay lập tức, trống khi không tìm thấy. Để ánh xạ qua nútList, domChildren chuyển đổi nó thành mảng. domEmpty ánh xạ một hàm domRemove trên tất cả các phần tử loại bỏ nó.

Ví dụ sử dụng:

domEmpty(document.body)

loại bỏ tất cả trẻ em khỏi các yếu tố cơ thể.

Các cách khác trong jQuery

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

chỉ đơn giản là IE:

parentElement.removeNode(true);

true - có nghĩa là thực hiện loại bỏ sâu - có nghĩa là tất cả trẻ em cũng bị loại bỏ

Cách dễ nhất:

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

đơn giản và nhanh chóng sử dụng cho vòng lặp !!

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

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

Điều này sẽ không hoạt động trong <span>thẻ!

Nếu bạn muốn đặt một cái gì đó trở lại vào đó div, innerHTMLcó lẽ tốt hơn.

Ví dụ của tôi:

<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>

Nếu tôi sử dụng .firstChildhoặc .lastChildphương thức thì displayHTML()hàm không hoạt động sau đó, nhưng không có vấn đề gì với .innerHTMLphương thức.

Đây là một javascript thuần túy tôi không sử dụng jQuery nhưng hoạt động trong tất cả các trình duyệt ngay cả IE và nó rất đơn giản để hiểu

   <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 ="";

})

với jQuery:

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