Phương thức removeChild() trong JavaScript

• Bùi Tấn Lực
• 31
• 14/09/2025

Phương thức removeChild() trong JavaScript dùng để xóa nút con HTML của một nút cha thông qua vị trí, id hoặc xóa tất cả, chi tiết như nào hãy cùng chúng tôi phân tích:

Phương thức removeChild() trong JavaScript

Chức năng của Phương thức removeChild() trong JavaScript

Phương thức removeChild() trong JavaScript dùng để xóa nút con HTML của một nút cha thông qua vị trí, id hoặc xóa tất cả các phần tử HTML con của một nút cha.

Code Phương thức removeChild() trong JavaScript

Phương thức removeChild() từng vị trí trong JavaScript

Chỉ định được vị trí của phần tử con cần xóa:

<ul id="ulid">
	<li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút XÓA PHẦN TỬ CON để xóa phần tử con đầu tiên, 0 là vị trí đầu tiên, sau khi xóa phần tử con đầu tiên thì phần tử con gần nhất sẽ là phần tử con đầu tiên, bạn có thể chỉ định 1, 2 để xóa phần tử con ở vị trí 1 hoặc 2. </p>
<button onclick="xoaPhanTuCon()">XÓA PHẦN TỬ CON</button>
<script>
function xoaPhanTuCon() {
const ulid = document.getElementById("ulid");
ulid.removeChild(ulid.children[0]); 
}
</script>

Chạy Thử

Phương thức removeChild() id trong JavaScript

Xóa phần tử con có id được chỉ định:

<ul id="ulid">
	<li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li id="lihosting">Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút XÓA PHẦN TỬ CON ID để xóa phần tử con có id đó</p>
<button onclick="xoaPhanTuConId()">XÓA PHẦN TỬ CON ID</button>
<script>
function xoaPhanTuConId() {
const lihosting = document.getElementById("lihosting");
lihosting.parentNode.removeChild(lihosting); 
}
</script>

Chạy Thử

Phương thức removeChild() xóa tất cả trong JavaScript

Xóa tất cả các nút con của nút cha:

<ul id="ulid">
	<li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút XÓA TẤT CẢ để xóa tất cả phần tử con của ul có id ulid</p>
<button onclick="xoaTatCa()">XÓA TẤT CẢ</button>
<script>
function xoaTatCa() {
const ulid = document.getElementById("ulid");
while (ulid.hasChildNodes()) {
    ulid.removeChild(ulid.firstChild);
  }
}
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức removeChild() trong JavaScript.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức removeChild() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn