🧪 Les 4: Dynamische lijsten en verwijderen van items

In deze oefening leren we:

✅ Hoe je een dynamische lijst maakt met invoer van de gebruiker
✅ Hoe je items toevoegt aan de lijst
✅ Hoe je individuele items uit de lijst kunt verwijderen
✅ Hoe je met jQuery een item visueel kunt verwijderen (animaties)

📋 Wat gaan we bouwen?

We maken een eenvoudige takenlijst. De gebruiker kan:

Taken toevoegen aan de lijst
Taken verwijderen door op een “Verwijder” knop naast de taak te klikken
Een taak wordt met een mooie animatie verwijderd

✅ 1. HTML-code

We beginnen met de HTML-structuur van de pagina:

<!DOCTYPE html>
<html>
<head>
    <title>Takenlijst met jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #taakLijst {
            margin-top: 20px;
        }

        .taak {
            margin: 10px 0;
            padding: 5px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .taak button {
            background-color: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        .taak button:hover {
            background-color: darkred;
        }

        #resultaat {
            margin-top: 10px;
            color: green;
        }
    </style>
</head>
<body>

    <h2>Maak je Takenlijst</h2>

    <input type="text" id="taakInput" placeholder="Typ een taak">
    <button id="voegTaakToe">Voeg Taak Toe</button>

    <div id="resultaat"></div>

    <div id="taakLijst"></div>

    <script>
        // jQuery-code komt hier onder
    </script>

</body>
</html>

✅ 2. jQuery toevoegen

Nu voegen we de jQuery-code toe die de takenlijst dynamisch maakt. We doen dit binnen het <script>-gedeelte onderaan de pagina.

$(document).ready(function() {
    
    // Taak toevoegen aan de lijst
    $('#voegTaakToe').click(function() {
        var taak = $('#taakInput').val(); // Lees de taak van de gebruiker

        // Controleer of de input niet leeg is
        if (taak.trim() !== "") {
            // Voeg de taak toe aan de lijst
            $('#taakLijst').append(`
                <div class="taak">
                    <span>${taak}</span>
                    <button class="verwijderTaak">Verwijder</button>
                </div>
            `);

            // Maak het invoerveld leeg na toevoegen
            $('#taakInput').val('');

            // Geef een succesmelding
            $('#resultaat').text('Taak toegevoegd!');
        } else {
            // Als het invoerveld leeg is, geef dan een foutmelding
            $('#resultaat').text('Voer een taak in!');
        }
    });

    // Verwijder taak bij klikken op de verwijderknop
    $(document).on('click', '.verwijderTaak', function() {
        // Voeg een fadeOut animatie toe en verwijder de taak daarna
        $(this).parent().fadeOut(500, function() {
            $(this).remove();
        });

        // Melding dat de taak is verwijderd
        $('#resultaat').text('Taak verwijderd!');
    });

});

🧠 Uitleg van de code:

1. Taak toevoegen aan de lijst

$('#voegTaakToe').click(function() {
    var taak = $('#taakInput').val(); // Lees de taak uit het invoerveld

We luisteren naar het klik-evenement op de “Voeg Taak Toe” knop.
De taak die de gebruiker invoert, wordt opgeslagen in de variabele taak via .val().

if (taak.trim() !== "") {
    $('#taakLijst').append(`
        <div class="taak">
            <span>${taak}</span>
            <button class="verwijderTaak">Verwijder</button>
        </div>
    `);
}

Als de taak niet leeg is, voegen we de nieuwe taak toe aan de lijst. We gebruiken .append() om HTML toe te voegen aan de #taakLijst div.
We gebruiken template literals (`) om dynamisch de taak in de lijst te zetten en een “Verwijder” knop toe te voegen aan elke taak.

2. Verwijderen van een taak

$(document).on('click', '.verwijderTaak', function() {
    $(this).parent().fadeOut(500, function() {
        $(this).remove();
    });
});

Het verwijderen van een taak gebeurt via de verwijderknop. We gebruiken $(document).on() om een event listener toe te voegen aan de verwijderknoppen. Dit werkt ook voor items die later worden toegevoegd.
$(this).parent() selecteert de ouder van de knop (de hele taak) en laat deze verdwijnen met de .fadeOut() animatie.
Nadat de animatie is voltooid, gebruiken we .remove() om de taak volledig uit de DOM te verwijderen.

3. Success- en foutmeldingen

$('#resultaat').text('Taak toegevoegd!');

Na het toevoegen of verwijderen van een taak, tonen we een bericht aan de gebruiker via de #resultaat div.
Als de invoer leeg is, tonen we een foutmelding: Voer een taak in!

✨ Wat leer je van deze oefening?

Hoe je dynamisch HTML toevoegt met jQuery (.append())
Hoe je animaties gebruikt om visuele effecten toe te voegen (fadeOut())
Hoe je met event delegation werkt om dynamische content interactief te maken ($(document).on())
Hoe je een foutcontrole uitvoert (bijvoorbeeld voor lege invoervelden)