Кнопка удаления работает только единожды

@Neonomad · Регистрация: 16.05.2024

Студворк — интернет-сервис помощи студентам

Привет форумчанам! Учусь на курсах по javascript, помогите с заданием, пожалуйста. Есть input и две кнопки для двух списков, в котором при вводе данных эти данные выводятся в один из двух списков. Вместе с введенными данными на этой же строке в список так же добавляется кнопка remove, но кнопка remove срабатывает только на одной строке, на остальных при нажатии ничего не происходит. Как сделать чтобы работали все кнопки?

HTML код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Todo list</h1>
        <input type="text" placeholder="Enter new task" id="input">
        <button id="addToday">Today</button>
        <button id="addFuture">After 5 years</button>
 
        <h2>Today</h2>
        <ul id="todayList">
            <li>Go to course</li>
            <li>Read a book</li>
        </ul>
 
        <h2>After 5 years list</h2>
        <ul id="futureList">
            <li>Learn back end</li>
            <li>Become js senior</li>
        </ul>
    </div>
 
    <script src="index.js"></script>
</body>
</html>

JS код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let input = document.getElementById("input")
let addButton = document.getElementById("addToday")
let todayList = document.getElementById("todayList")
let addButton2 = document.getElementById("addFuture")
let futureList = document.getElementById("futureList")
 
function addTask() {
    let inputText = input.value;
    if (inputText.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.innerHTML = `<input type="checkbox"/> ${inputText} <button id="remove">Remove</button>`;
        todayList.appendChild(taskItem);
        document.getElementById("remove").onclick = function (e) {
            if (e.target.idName == "remove") return
            let item = e.target.closest("li")
            item.remove()
        }
 
 
    }
}
addButton.addEventListener("click", addTask)
 
function addFutureTask() {
    let inputText = input.value;
    if (inputText.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.innerHTML = `<input type="checkbox"/> ${inputText} <button id="remove">Remove</button>`;
        futureList.appendChild(taskItem);
        document.getElementById("remove").onclick = function (e) {
            if (e.target.idName == "remove") return
            let item = e.target.closest("li")
            item.remove()
        }
 
    }
 
}
addButton2.addEventListener("click", addFutureTask)

CSS код:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
 
.container {
    width: 700px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 6px 10px black;
}
 
h1,
h2 {
    text-align: center;
}
 
#input {
    width: 60%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 40px;
}
 
ul {
    list-style: none;
}
 
li {
    margin: 5px 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px solid black;
    padding: 5px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
button {
    padding: 8px 15px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

@mr_dramm · 16.05.2024, 23:47

на странице все id должны быть уникальны, и повторяющийся код функций можно выделить в отдельную функцию

@voraa · 17.05.2024, 07:48

Code
1
e.target.idName == "remove"

Нет такого атрибута - idName

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	16.05.2024, 23:47
	на странице все id должны быть уникальны, и повторяющийся код функций можно выделить в отдельную функцию 0