Chỉ cần JavaScript [theo yêu cầu]
Thêm chức năng này ở đâu đó trên trang của bạn [tốt nhất là trong ]
function clearBox[elementID]
{
document.getElementById[elementID].innerHTML = "";
}
Sau đó thêm nút trên sự kiện nhấp vào:
Trong jQuery [để tham khảo]
Nếu bạn thích jQuery, bạn có thể làm:
$["#cart_item"].html[""];
Trống một phần tử DOM bằng JavaScript #
Sử dụng phương thức replaceChildren[]
để làm trống một phần tử, ví dụ:
0. Khi phương thức
1 được gọi mà không chuyển nó cho bất kỳ đối số nào, phương thức làm trống yếu tố của tất cả trẻ em.
Đây là HTML cho các ví dụ trong bài viết này.
Copied!
DOCTYPE html> One Two Three
Và đây là mã JavaScript liên quan.
Copied!
const box = document.getElementById['box']; box.replaceChildren[];
Chúng tôi đã gọi phương thức thay thế mà không chuyển nó bất kỳ thông số nào, điều này làm trống yếu tố của tất cả trẻ em của nó.
Phương pháp này cũng có thể được sử dụng để thay thế trẻ em hiện tại của một yếu tố bằng một bộ trẻ em được cung cấp.
Copied!
const box = document.getElementById['box']; const p1 = document.createElement['p']; p1.innerHTML = `Apple`; const p2 = document.createElement['p']; p2.innerHTML = `Orange`; box.replaceChildren[p1, p2]; // ✅ If you have a collection of elements // use spread operator [...] to unpack the collection // box.replaceChildren[...[p1, p2]];
Bằng cách sử dụng phương thức
1, chúng tôi có thể làm trống phần tử và thêm một bộ trẻ em mới vào nó trong một bước duy nhất, nhanh hơn một chút.Phương pháp lấy một hoặc nhiều đối tượng
3 hoặc chuỗi, mà nó thay thế cho trẻ em hiện có của phần tử.Trống một phần tử DOM bằng cách sử dụng TextContent #
Để trống một phần tử DOM, đặt thuộc tính
4 của phần tử thành một chuỗi trống, ví dụ:
5. Cài đặt
4 trên phần tử sẽ loại bỏ tất cả trẻ em của nó và thay thế chúng bằng một nút văn bản duy nhất có giá trị được cung cấp.
Copied!
const box = document.getElementById['box']; box.textContent = '';
Thuộc tính TextContent có thể được sử dụng để đọc và đặt nội dung văn bản của một phần tử.
Khi sử dụng thuộc tính để đặt nội dung văn bản của nút, tất cả trẻ em của phần tử sẽ bị xóa và thay thế bằng giá trị chuỗi được cung cấp.
Trong ví dụ trên, chúng tôi thay thế hiệu quả tất cả trẻ em của phần tử bằng một chuỗi trống.
Bạn cũng có thể thấy thuộc tính
7 đang được sử dụng theo cách tương tự.Copied!
const box = document.getElementById['box']; box.innerHTML = '';
Điều này đạt được kết quả tương tự, tuy nhiên nó có thể chậm hơn vì cài đặt thuộc tính
7 sử dụng trình phân tích cú pháp HTML của trình duyệt.Thuộc tính
4 không sử dụng trình phân tích cú pháp HTML của trình duyệt và có thể nhanh hơn nếu phần tử có nhiều trẻ em.Cách tiếp cận mà bạn chọn là một vấn đề sở thích cá nhân. Tôi sẽ đi với phương pháp
1 vì nó trực tiếp, dễ đọc và có thể được sử dụng để thay thế các phần tử con bị loại bỏ trong một bước duy nhất.