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:
html<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:
javascriptlet 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:
javascriptlet 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();
});
}
Задание 1
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.
Задание 2
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 đó.