javascript lista item programowanie

pytanie zadane 26 sierpnia 2020 w JavaScript przez kubaa322 Użytkownik (710 p.)

Witam, robię bardzo prostą todo listę i napotkałem pierwszy problem. Otóż wszystko działa fajnie do momentu gdzie klikam przycisk z class = 'remove' który ma służyć do usuwania elementu listy(tylko jednego). Jednak odpalając poniższy kod działa tylko przycisk pierwszego elementu z listy a reszta nie działa. Na dodatek przycisk ten usuwa wszystkie elementy listy a nie tylko jeden. Z góry dziękuję za pomoc

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list</title>
    <link rel = 'stylesheet' href = 'style.css'>
    <script src = 'main.js' defer></script>
</head>
<body>
    <input class = 'task-input' type = 'text' placeholder = 'New task'/>
    <button class = 'add-task'>Add task</button>
    <ul class = 'list'>

    </ul>
</body>
</html>

JS:

const list = document.querySelector('.list');
const addTask = document.querySelector('.add-task');
addTask.addEventListener('click', () => {
    const input = document.querySelector('.task-input').value;
    
    const taskItem = {
        name: input
    };
    const listItem = document.createElement('li');
    listItem.className = 'list-item';
    listItem.innerHTML = `
    <p>
    ${taskItem.name}
    <button class = 'remove'>-</button>
`;
list.append(listItem);
const remove = document.querySelector('.remove');
remove.addEventListener('click', () => {
    list.remove(listItem);
});
});

i jeśli ma to jakieś znaczenie to CSS:

body{
    margin: 0;
    padding: 0;
    background: #68b0ab;
}
.task-input{
    padding-left: 15px;
    font-family: Bahnschrift;
    font-weight: 1000;
    font-size: 25px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    outline: none;
    width: 500px;
    height: 50px;
    position: absolute;
    top: 30%;
    left: 30%;
}
.add-task{
    font-family: Bahnschrift;
    font-weight: 1000;
    font-size: 25px;
    letter-spacing: 2px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 200px;
    height: 52px;
    background: #c8d5b9;
    border: none;
    outline: none;
    position: absolute;
    top: 30%;
    left: 56.2%;
}
.list{
    font-family: Bahnschrift;
    font-size: 25px;
    list-style-type: none;
    position: absolute;
    top: 50%;
    left: 47.5%;
    transform: translate(-50%, -50%);
    background: transparent;
    width: 800px;
    height: 100px;
}
.list-item{
    border-radius: 15px;
    font-family: Bahnschrift;
    font-size: 25px;
    line-height: 50px;
    background: #8fc0a9;
    height: 50px;
    padding-left: 20px;
}
.remove{
    font-family: Bahnschrift;
    font-size: 25px;
    line-height: 25px;
    background: #faf3dd;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

komentarz 26 sierpnia 2020 przez VBService Ekspert (253,340 p.)

Nie zapomnij dodać coś na wzór

    const input = document.querySelector('.task-input').value;    
    if (input.trim() == "") return;

aby zapobiec dodawaniu pustego task-a.

1 odpowiedź

odpowiedź 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

const remove = document.querySelector('.remove');

To wyszukuje zawsze tylko pierwszy element o klasie remove w obrębie dokumentu (strony). Dlatego podpięcie się na click działa tylko dla pierwszego przycisku z tą klasą.

A przycisk ten usuwa wszystkie elementy, a nie tylko konkretny, ponieważ metoda remove usuwa element, w kontekście którego została wywołana - a więc całą listę - a nie, przekazane jako parametr, dziecko.

Naprawić to można np. w ten sposób:

  const remove = listItem.querySelector(".remove");
  remove.addEventListener("click", () => {
    list.removeChild(listItem);
  });

Przycisk remove pobrać szukając "z poziomu" zmiennej listItem, zamiast dokumentu i w listenerze użyć removeChild zamiast remove.

komentarz 26 sierpnia 2020 przez kubaa322 Użytkownik (710 p.)

Dzięki wielkie za wyjaśnienie

Podobne pytania

javascript lista item programowanie

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci