Не работает кнопка удалить, и последующие items создаются пустыми

@raizenium · Регистрация: 20.02.2021

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

Всем привет, не могу понять что не так с этим кодом. Первый item создается нормально, но там не работает кнопка удалить, следующий item создается пустым, и все элементы (кроме кнопки удалить) появляются уже в существующем item'е.
P.S: Item'ы которые я прописывал в HTML, кнопка нормально удаляла.

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
$(function() {
    $('.busy--btn').click(function(ev){
        ev.preventDefault();
        let input = document.querySelector("input").value;
        let text = document.querySelector("textarea").value;
        let busyItem = document.createElement("div");
        let busyTitle = document.createElement("div");
        let busyText = document.createElement("div");
        let button = document.createElement("button");
        let x = document.createElement("img");
        x.src = "img/x.png";
        
        button.classList.add("delete__busy");
        busyItem.classList.add("busy__item");
        busyTitle.classList.add("item__title");
        busyTitle.innerText = input;
        busyText.classList.add("item__text");
        busyText.innerText = text;
        
        document.querySelector("#col__left").appendChild(busyItem);
        document.querySelector(".busy__item").appendChild(busyTitle);
        document.querySelector(".busy__item").appendChild(button);
        document.querySelector(".delete__busy").appendChild(x);
        document.querySelector(".busy__item").appendChild(busyText);
    });
    
 
    $('.delete__busy').click(function(){
        $(this).parent('.busy__item').remove();
    });
});

@Smls · 21.02.2021, 10:25

Ты бы хоть html привел что-бы понятно было что там происходит.

Сообщение от raizenium

но там не работает кнопка удалить

Потому что она динамически создана. Поменяй

JavaScript
1
$('.delete__busy').click(function()

на

JavaScript
1
$(document).on('click', '.delete__busy', function()

@Demolition_Man · 21.02.2021, 11:29

Хм. интересная задачка. Не буду умничать, но вероятно тут проблема в контексте "this", интересно на кого он ссылается)))

@j2FunOnly · 25.02.2021, 14:58

Сообщение от Demolition_Man

интересно на кого он ссылается

На кнопку по которой кликнули.

Сообщение от raizenium

следующий item создается пустым, и все элементы (кроме кнопки удалить) появляются уже в существующем item'е.

Создаётся всё ровно так как вы и написали:

Сообщение от raizenium

JavaScript
20
21
        document.querySelector("#col__left").appendChild(busyItem);
        document.querySelector(".busy__item").appendChild(busyTitle);

busyItem добавляете к элементу #col__left, а всё остальное к первому попавшемуся .busy__item на странице, с картинкой для кнопки та же история.

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
$(function() {
 
  $('.busy--btn').click(function(ev) {
    ev.preventDefault();
    let input = document.querySelector("input").value;
    let text = document.querySelector("textarea").value;
 
    let busyItem = document.createElement("div");
    let busyTitle = document.createElement("div");
    let busyText = document.createElement("div");
    let button = document.createElement("button");
    let x = document.createElement("img");
    x.src = "//placehold.it/50x50";
 
    button.classList.add("delete__busy");
    busyItem.classList.add("busy__item");
    busyTitle.classList.add("item__title");
    busyTitle.innerText = input;
    busyText.classList.add("item__text");
    busyText.innerText = text;
 
    document.querySelector("#col__left").appendChild(busyItem);
    // document.querySelector(".busy__item").appendChild(busyTitle);
    busyItem.appendChild(busyTitle);
    busyItem.appendChild(button);
    button.appendChild(x);
    busyItem.appendChild(busyText);
  });
 
 
  $('#col__left').on('click', '.delete__busy', function() {
    $(this).parent('.busy__item').remove();
  });
});

Ну и пользуйте jQuery раз такое дело

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
 
  $('.busy--btn').click(function(ev) {
    ev.preventDefault();
    const input = document.querySelector("input").value;
    const text = document.querySelector("textarea").value;
 
    const $busyItem = $('<div>').addClass('busy__item');
    const $busyTitle = $('<div>').addClass('item__title').text(input);
    const $busyText = $('<div>').addClass('item__text').text(text);
    const $button = $('<button>').addClass('delete__busy').append($('<img src="//placehold.it/20x20?text=x">'));
 
    $busyItem
      .append($busyTitle, $button, $busyText)
      .appendTo('#col__left');
  });
 
 
  $('#col__left').on('click', '.delete__busy', function() {
    $(this).parent('.busy__item').remove();
  });
});

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Demolition_Man 22 / 15 / 8 Регистрация: 20.02.2019 Сообщений: 128
	21.02.2021, 11:29
	Хм. интересная задачка. Не буду умничать, но вероятно тут проблема в контексте "this", интересно на кого он ссылается))) 0

Не работает кнопка удалить, и последующие items создаются пустыми

Решение