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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

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.