JavaScript में बटन क्लिक पर li एलिमेंट्स कैसे हटाएं?

प्रत्येक <li> में बटन जोड़ें, इवेंट डेलिगेशन या व्यक्तिगत लिसनर से remove() या closest() मेथड से पैरेंट <li> हटाएं।

HTML स्ट्रक्चर

<ul id="subjectList">
    <li class="subjectName">JavaScript <button class="removeBtn">हटाएं</button></li>
    <li class="subjectName">MySQL <button class="removeBtn">हटाएं</button></li>
    <li class="subjectName">MongoDB <button class="removeBtn">हटाएं</button></li>
    <li class="subjectName">Java <button class="removeBtn">हटाएं</button></li>
</ul>

विधि 1: इवेंट डेलिगेशन (अनुशंसित - कुशल)

const list = document.getElementById('subjectList');

list.addEventListener('click', function(event) {
    // क्लिक किया गया एलिमेंट बटन है?
    if (event.target.classList.contains('removeBtn')) {
        // closest() से पैरेंट li ढूंढें और हटाएं
        const li = event.target.closest('.subjectName');
        if (li) li.remove();
    }
});

विधि 2: प्रत्येक बटन पर लिसनर (सरल लेकिन कम कुशल)

document.querySelectorAll('.removeBtn').forEach(button => {
    button.addEventListener('click', function() {
        this.closest('.subjectName').remove();
    });
});

विधि 3: इनलाइन onclick (पुराना तरीका)

<li class="subjectName">
    JavaScript 
    <button onclick="this.closest('.subjectName').remove()">हटाएं</button>
</li>

पूरा कार्यकारी उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LI हटाएं डेमो</title>
    <style>
        .subjectName { padding: 10px; margin: 5px; background: #f0f0f0; display: flex; justify-content: space-between; }
        .removeBtn { background: #ff4444; color: white; border: none; padding: 5px 10px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>विषय हटाएं</h1>
    <ul id="subjectList">
        <li class="subjectName">JavaScript <button class="removeBtn">हटाएं</button></li>
        <li class="subjectName">MySQL <button class="removeBtn">हटाएं</button></li>
        <li class="subjectName">MongoDB <button class="removeBtn">हटाएं</button></li>
        <li class="subjectName">Java <button class="removeBtn">हटाएं</button></li>
    </ul>

    <script>
        document.getElementById('subjectList').addEventListener('click', function(e) {
            if (e.target.matches('.removeBtn')) {
                e.target.closest('.subjectName').remove();
            }
        });
    </script>
</body>
</html>

चलाने का तरीका

फ़ाइल को remove-li.html नाम से सेव करें और ब्राउज़र में खोलें। "हटाएं" बटन क्लिक करके आइटम्स हटाएं।

महत्वपूर्ण मेथड्स

बोनस: हटाने से पहले कन्फर्मेशन

list.addEventListener('click', function(e) {
    if (e.target.matches('.removeBtn')) {
        if (confirm('क्या आप वाकई हटाना चाहते हैं?')) {
            e.target.closest('.subjectName').remove();
        }
    }
});