Cách xóa phần tử DOM với JavaScript

Tìm hiểu hai cách nhanh chóng để xóa hoặc ẩn phần tử khỏi DOM với JavaScript.

Có hai cách để xóa/ẩn phần tử khỏi DOM với JavaScript. Hãy tự hỏi “Tôi có cần đưa phần tử này trở lại tại thời điểm nào không?”.

Nếu câu trả lời là có, thì bạn nên ẩn phần tử bằng thuộc tính style:

const hideElement = document.querySelector('#element-to-hide') hideElement.style.display = 'none'

Nếu không cần đưa phần tử trở lại, dùng cách này:

const removeElement = document.querySelector('#element-to-remove') removeElement.parentNode.removeChild(removeElement)

Nhớ rằng khi dùng querySelector() để chọn phần tử, # dành cho phần tử có thuộc tính ID, . dành cho class.