Xóa phần tử theo id

Khi xóa một phần tử bằng JavaScript tiêu chuẩn, trước tiên bạn phải chuyển đến phần tử mẹ của nó:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Trước tiên tôi phải vào nút cha có vẻ hơi kỳ lạ, có lý do gì JavaScript hoạt động như thế này không?

Tôi biết rằng việc tăng cường các chức năng DOM gốc không phải lúc nào cũng là giải pháp tốt nhất hoặc phổ biến nhất, nhưng điều này hoạt động tốt cho các trình duyệt hiện đại.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

Và sau đó bạn có thể loại bỏ các yếu tố như thế này

document.getElementById("my-element").remove();

hoặc là

document.getElementsByClassName("my-elements").remove();

Lưu ý: giải pháp này không hoạt động cho IE 7 trở xuống. Để biết thêm thông tin về việc mở rộng DOM, hãy đọc bài viết này .

EDIT : Xem xét câu trả lời của tôi vào năm 2019, node.remove()đã đến để giải cứu và có thể được sử dụng như sau (không có polyfill ở trên):

document.getElementById("my-element").remove();

hoặc là

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

Các chức năng này có sẵn trong tất cả các trình duyệt hiện đại (không phải IE). Đọc thêm về MDN .

Crossbrowser và IE> = 11:

document.getElementById("element-id").outerHTML = "";

Bạn có thể tạo một removechức năng để bạn không phải suy nghĩ về nó mỗi lần:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

Đó là những gì DOM hỗ trợ . Tìm kiếm trang đó để "xóa" hoặc "xóa" và removeChild là trang duy nhất xóa nút.

DOM được tổ chức trong một cây các nút, trong đó mỗi nút có một giá trị, cùng với một danh sách các tham chiếu đến các nút con của nó. Vì vậy, element.parentNode.removeChild(element)bắt chước chính xác những gì đang xảy ra trong nội bộ: Đầu tiên bạn vào nút cha, sau đó xóa tham chiếu đến nút con.

Kể từ DOM4, một hàm trợ giúp được cung cấp để làm điều tương tự : element.remove(). Điều này hoạt động trong 87% trình duyệt (tính đến năm 2016), nhưng không phải IE 11. Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn có thể:

• Xóa các phần tử thông qua nút cha, như trong câu hỏi ,
• sửa đổi các hàm DOM gốc, như trong câu trả lời của Johan Dettmar , hoặc
• sử dụng một polyfill DOM4 .

Để xóa một phần tử:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

Để loại bỏ tất cả các phần tử với ví dụ một tên lớp nhất định:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

bạn chỉ có thể sử dụng element.remove()

Các ChildNode.remove()phương pháp loại bỏ các đối tượng từ cây nó thuộc về.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Đây là một câu đố cho thấy làm thế nào bạn có thể gọi document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Không cần phải mở rộng NodeList. Nó đã được thực hiện rồi.

**

Bạn có thể loại bỏ trực tiếp phần tử đó bằng remove()phương thức DOM.

đây là một ví dụ:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Theo DOM cấp 4 thông số kỹ thuật, đó là phiên bản hiện tại trong phát triển, có một số phương pháp đột biến tiện dụng mới có sẵn: append(), prepend(), before(), after(), replace(), và remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Trước tiên tôi phải vào nút cha có vẻ hơi kỳ lạ, có lý do gì JavaScript hoạt động như thế này không?

Tên hàm là removeChild(), và làm thế nào có thể loại bỏ đứa trẻ khi không có cha mẹ? :)

Mặt khác, bạn không phải luôn gọi nó như bạn đã thể hiện. element.parentNodechỉ là một người trợ giúp để có được nút cha của nút đã cho. Nếu bạn đã biết nút cha, bạn có thể sử dụng nó như thế này:

Ví dụ:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

Để thêm một cái gì đó nữa:

Một số câu trả lời đã chỉ ra rằng thay vì sử dụng parentNode.removeChild(child);, bạn có thể sử dụng elem.remove();. Nhưng như tôi đã nhận thấy, có một sự khác biệt giữa hai chức năng và nó không được đề cập trong các câu trả lời đó.

Nếu bạn sử dụng removeChild(), nó sẽ trả về một tham chiếu đến nút bị loại bỏ.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Nhưng nếu bạn sử dụng elem.remove();, nó sẽ không trả lại cho bạn tài liệu tham khảo.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Hành vi này có thể được quan sát trong Chrome và FF. Tôi tin rằng nó đáng chú ý :)

Hy vọng câu trả lời của tôi thêm một số giá trị cho câu hỏi và sẽ hữu ích !!

Các hàm sử dụng ele.parentNode.removeChild (ele) sẽ không hoạt động đối với các phần tử bạn đã tạo nhưng chưa được chèn vào HTML. Các thư viện như jQuery và Prototype khôn ngoan sử dụng một phương thức như sau để tránh giới hạn đó.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Tôi nghĩ rằng JavaScript hoạt động như vậy bởi vì các nhà thiết kế ban đầu của DOM giữ cha mẹ / con cái và điều hướng trước đó / tiếp theo là ưu tiên cao hơn so với các sửa đổi DHTML rất phổ biến hiện nay. Có thể đọc từ một <input type = 'text'> và viết cho người khác theo vị trí tương đối trong DOM là hữu ích vào giữa những năm 90, thời điểm mà việc tạo động của toàn bộ biểu mẫu HTML hoặc các thành phần GUI tương tác chỉ là một sự lấp lánh mắt của một số nhà phát triển.

Trước tiên tôi phải vào nút cha có vẻ hơi kỳ lạ, có lý do gì JavaScript hoạt động như thế này không?

IMHO: Lý do cho điều này giống như tôi đã thấy trong các môi trường khác: Bạn đang thực hiện một hành động dựa trên "liên kết" của bạn với một cái gì đó. Bạn không thể xóa nó trong khi bạn liên kết với nó.

Giống như chặt một cành cây. Ngồi ở phía gần cây nhất trong khi cắt hoặc kết quả sẽ là ... không may (mặc dù buồn cười).

Cái này thực sự đến từ FireFox ... lần đầu tiên, IE đã đi trước gói và cho phép loại bỏ một phần tử trực tiếp.

Đây chỉ là giả định của tôi, nhưng tôi tin rằng lý do bạn phải loại bỏ một đứa trẻ thông qua cha mẹ là do vấn đề với cách FireFox xử lý tài liệu tham khảo.

Nếu bạn gọi một đối tượng để trực tiếp cam kết hari-kari, thì ngay sau khi nó chết, bạn vẫn đang giữ tham chiếu đó cho nó. Điều này có khả năng tạo ra một số lỗi khó chịu ... chẳng hạn như không xóa nó, xóa nó nhưng giữ các tham chiếu đến nó có vẻ hợp lệ hoặc đơn giản là rò rỉ bộ nhớ.

Tôi tin rằng khi họ nhận ra vấn đề, công việc xung quanh là loại bỏ một phần tử thông qua phần tử mẹ của nó bởi vì khi phần tử đó không còn nữa, bây giờ bạn chỉ cần giữ một tham chiếu đến phần cha mẹ. Điều này sẽ ngăn chặn tất cả sự khó chịu đó, và (ví dụ, nếu đóng một nút cây theo nút) sẽ "nén" khá độc đáo.

Đây có thể là một lỗi dễ sửa, nhưng cũng như nhiều thứ khác trong lập trình web, việc phát hành có lẽ đã vội vàng, dẫn đến điều này ... và đến khi phiên bản tiếp theo xuất hiện, đủ người sử dụng nó để thay đổi điều này sẽ dẫn đến để phá vỡ một loạt các mã.

Một lần nữa, tất cả điều này chỉ đơn giản là phỏng đoán của tôi.

Tuy nhiên, tôi mong đến ngày khi lập trình web cuối cùng cũng được dọn dẹp toàn bộ mùa xuân, tất cả những điều bình dị kỳ lạ này được dọn sạch, và mọi người bắt đầu chơi theo cùng một quy tắc.

Có lẽ một ngày sau khi người hầu robot của tôi kiện tôi đòi lại tiền lương.

Theo những gì tôi hiểu, việc loại bỏ một nút trực tiếp không hoạt động trong Firefox, chỉ có Internet Explorer. Vì vậy, để hỗ trợ Firefox, bạn phải tìm đến cha mẹ để loại bỏ nó.

Tham chiếu: http://chiragrdarji.wordpress.com/2007/03/16/remondelete-element-from-page-USE-javascript- Work-in-firefoxieopera /

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

Đây là chức năng tốt nhất để xóa phần tử không có lỗi tập lệnh:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Lưu ý đến EObj=document.getElementById(EId).

Đây là MỘT dấu bằng không ==.

nếu phần tử EIdtồn tại thì hàm sẽ loại bỏ nó, nếu không thì nó trả về false, không error.