Xóa phần tử li khi nhấn nút trong JavaScript

Gắn sự kiện click cho nút "Remove" trong mỗi <li>, dùng closest() tìm cha <li> và remove() xóa nó.

Ví dụ

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xóa li onclick</title>
</head>
<body>
    <h1>Xóa môn học</h1>
    <ul>
        <li class="subjectName">JavaScript <button>Xóa</button></li>
        <li class="subjectName">MySQL <button>Xóa</button></li>
        <li class="subjectName">MongoDB <button>Xóa</button></li>
        <li class="subjectName">Java <button>Xóa</button></li>
    </ul>

    <script>
        document.querySelectorAll(".subjectName").forEach(item => {
            item.querySelector("button").addEventListener("click", function() {
                this.closest(".subjectName").remove();
            });
        });
    </script>
</body>
</html>

Cách chạy

Lưu index.html, mở Live Server, nhấn nút "Xóa" trên từng môn.

Kết quả

Môn học tương ứng bị xóa khỏi danh sách ngay lập tức.

Hiện đại: Dùng forEach thay vòng lặp for, closest() tìm ancestor khớp selector.