Remove DOM element trong Javascript [JAVASCRIPT]

Hôm nay ta sẽ học cách remove một element trong DOM. Ví dụ ta có một ul sau:

<ul class='list'>
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item">Item 4</li>
</ul>

Nếu ta muốn remove element đầu tiên là "Item 1" ta làm như sau

<script>
  var listItems =document.getElementsByClassName('list-item');
  listItems[0].remove();

</script>

Ta lấy ra tất cả li và truy cập vào li đầu tiên và remove ra.

Demo

Hoặc ta có thể dùng cách sau.

<ul class='list2'>
  <li class="list-item2">Item 1</li>
  <li class="list-item2">Item 2</li>
  <li class="list-item2">Item 3</li>
  <li class="list-item2">Item 4</li>
</ul>

<script>
  var ul = document.getElementById('list2');
  var listItems2 =document.getElementsByClassName('list-item2'); 
  ul.removeChild(listItems2[0]);

</script>

Ta truy cập vào ul dùng phương thứ removeChild() để remove li đầu tiên.

Demo

Như vậy là ta đã biết cách remove trong DOM rồi nhé. Bài viết sau ta sẽ học cách replace element trong DOM.