JavaScript-এ বাটন ক্লিকে li এলিমেন্ট রিমুভ করা

HTML স্ট্রাকচার

<ul>
    <li class="subjectName">JavaScript <button>Remove</button></li>
    <li class="subjectName">MySQL <button>Remove</button></li>
    <li class="subjectName">MongoDB <button>Remove</button></li>
    <li class="subjectName">Java <button>Remove</button></li>
</ul>

JavaScript কোড

const items = document.querySelectorAll(".subjectName");

items.forEach(item => {
    // বাটন ক্লিক হ্যান্ডলার
    item.querySelector("button").addEventListener("click", function(e) {
        e.stopPropagation(); // প্যারেন্টে ইভেন্ট বাবলিং বন্ধ
        this.closest(".subjectName").remove(); // প্যারেন্ট li রিমুভ
    });
    
    // অপশনাল: আইটেম ক্লিকে টগল
    item.addEventListener("click", function() {
        this.classList.toggle("active");
    });
});

পূর্ণ HTML উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Remove LI Demo</title>
    <style>
        .subjectName { cursor: pointer; padding: 10px; margin: 5px; background: #f9f9f9; }
        .subjectName.active { background: #e0ffe0; }
        button { margin-left: 10px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>বিষয় তালিকা</h1>
    <ul id="subjectList">
        <li class="subjectName">JavaScript <button>Remove</button></li>
        <li class="subjectName">MySQL <button>Remove</button></li>
        <li class="subjectName">MongoDB <button>Remove</button></li>
        <li class="subjectName">Java <button>Remove</button></li>
    </ul>

    <script>
        document.querySelectorAll(".subjectName").forEach(item => {
            item.querySelector("button").addEventListener("click", e => {
                e.stopPropagation();
                item.remove(); // সরাসরি item রিমুভ (closest লাগেনা)
            });
        });
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি removeLi.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. বिभিন্ন "Remove" বাটনে ক্লিক করুন।

ইভেন্ট ডেলিগেশন (দ্রুত, ডাইনামিক এলিমেন্টের জন্য)

document.getElementById("subjectList").addEventListener("click", e => {
    if (e.target.tagName === "BUTTON") {
        e.target.closest(".subjectName").remove();
    }
});

সতর্কতা

• `e.stopPropagation()` ছাড়া বাটন ক্লিকে li-রও ক্লিক ইভেন্ট ফায়ার হবে।
• `closest()` সাপোর্ট: মডার্ন ব্রাউজার (IE নয়)।
• ডাইনামিক্যালি যোগ করা li-র জন্য ইভেন্ট ডেলিগেশন বাধ্যতামূলক।