Tạo liên kết để xóa phần tử bằng JavaScript
Bây giờ giả sử chúng ta có nhiều đoạn văn:
<div id="parent">
<p>văn bản 1</p>
<p>văn bản 2</p>
<p>văn bản 3</p>
</div>
Hãy làm sao để mỗi đoạn văn thêm vào cuối một liên kết để xóa nó.
Đầu tiên, hãy thực hiện việc thêm liên kết:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'xóa';
elem.appendChild(remove);
}
Bây giờ hãy làm sao để khi nhấp vào liên kết, đoạn văn tương ứng sẽ bị xóa:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'xóa';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
Cho thẻ ul. Hãy thêm vào cuối mỗi
thẻ li một liên kết để xóa li đó
khỏi danh sách.
Cho một bảng HTML. Hãy thêm vào đó một cột nữa, trong đó mỗi hàng của bảng sẽ có một liên kết để xóa hàng đó.