Liên kết xóa phần tử bằng JavaScript

Giả sử chúng ta có một đoạn văn. Hãy tạo một liên kết bên cạnh nó để có thể xóa đoạn văn này.

Thực hiện:

<div id="parent">
	<p id="elem">văn bản</p>
	<a href="#" id="remove">xóa</a>
</div>

let elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function() {
	elem.remove();
});

Lưu ý rằng trong thuộc tính href của liên kết có dấu #. Nếu bỏ dấu # này - chúng ta sẽ thực hiện chuyển hướng liên kết và, kết quả là, trang sẽ được làm mới.

Trên thực tế, việc xóa đoạn văn cũng sẽ diễn ra, nhưng chúng ta sẽ không nhận thấy vì trang được làm mới và mọi thứ trở về trạng thái ban đầu.

Để giải quyết vấn đề này cần ngăn chặn hành vi mặc định của liên kết bằng preventDefault:

<div id="parent">
	<p id="elem">văn bản</p>
	<a href="" id="remove">xóa</a>
</div>

let elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // hủy hành vi mặc định của liên kết
});

Tự mình, không xem mã của tôi, giải quyết bài toán đã mô tả.