Có removeChild thực sự xóa phần tử không?

Question

Chức năng removeChild có thực sự xóa nút con hoàn toàn không? Hoặc nó chỉ loại bỏ phần tử là con của nút parant được chỉ định? Nếu nó không thực sự xóa phần tử, có cách nào để xóa hoàn toàn phần tử không?

Answer 1

Phương thức removeChild chỉ đơn giản là xóa nó khỏi cha mẹ của nó. Nếu đó là phần tử hiển thị của trang, phần tử đó sẽ bị xóa khỏi trang.

Nhưng Javascript có bộ sưu tập rác. Điều này có nghĩa là chính đối tượng nút sẽ vẫn tồn tại miễn là bất kỳ biến nào đề cập đến nó. Vì vậy, bạn có thể gán một nút cho một biến, sử dụng removeChild để 'prune' nó từ nút cha của nó, và sau này, chèn hoặc nối nó vào một số nút khác, do đó có hiệu quả di chuyển nó xung quanh trên trang.

Các mã sau đây sẽ loại bỏ một nút, và chờ 10 giây trước khi tái thêm nó vào cây (và do đó, để trang):

var oldNode = someNode.removeChild(...); 
setTimeout(function() { 
    document.documentElement.appendChild(oldNode); 
}, 10000); 

Điều này có nghĩa rằng đối tượng nút vẫn chưa được bị xóa khỏi bộ nhớ, bởi vì vẫn còn một biến trỏ đến nó (cụ thể là, oldNode).

Một trường hợp khác:

var node = document.getElementById('test'); 
// ... do stuff 
node.parentElement.removeChild(node); 
// 'node' still exists, but has been removed from the page 
// ... do some more stuff 
node = document.getElementById('hello'); 
// The variable 'node' now points to something else; 
// this means the original node will be deleted from memory 

Nếu, mặt khác, bạn không gán nút gỡ bỏ để biến khác, nó không thể được truy cập nữa (không thông qua cây tài liệu, kể từ nó đã bị xóa khỏi đó, và không phải thông qua biến JS); nên javascript sẽ tự động tẩy nó từ bộ nhớ:

someNode.removeChild(...); 

Gán nút gỡ bỏ cho một biến, và sau đó gán null (hoặc bất cứ điều gì khác) để biến đó - như Marc B gợi ý trong câu trả lời của ông - là hoàn toàn không cần thiết và, IMHO, ngớ ngẩn.

Answer 2

removeChild xóa phần tử khỏi dom, nhưng nó cũng được trả lại từ hàm trong trường hợp bạn đang thực hiện việc xóa để chèn lại nó ở nơi khác. Bạn sẽ phải giết mà giá trị trả về để thực sự thoát khỏi nút loại bỏ:

oldNode = someNode.removeChild(...); 
oldNode = null; 

Answer 3

này hoàn toàn sẽ xóa các nút:

someNode.removeChild(...); 

này sẽ loại bỏ các nút từ DOM vì vậy nó không hiển thị nhưng sẽ lưu nó để bạn có thể chèn nó ở nơi khác:

oldNode = someNode.removeChild(...); 

Answer 4

Nếu bạn thực sự muốn xóa phần tử dom. removeChild một mình là không đủ. Đây là theo Steve Sounders, tác giả của YSlow. Bạn cần phải sử dụng xóa