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.