Удаление записи после добавления

@tigroid3 · Регистрация: 21.12.2013

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

У меня есть форма c div="field" где содержится инпут, 2 поля и кнопка удалить. Вначале поле только одно, потом я нажимаю добавить , появляется ещё 1 div. При нажатии на кнопку удалить, удаляется только первый элемент, а которые я добавил не реагируют вообще.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="field1">
                           <div class="service">
                               <span>Услуга</span><br>
                <select name="service" id="bom" class="selct"></select>
                    </div>
                           
                    <div class="parametrs">
                    <a href="#" class="delposition" id="removePos"></a>
    
                    <div class="sum"><span>Сумма</span><br><input name="price" placeholder="15.000" type="text" class="summa">  </div>
                    <div class="quantity"><span>Количество</span><br><input name="quantity" placeholder="12" type="text" class="quant"></div>
                    </div>
                </div>

Пробовал так, но не получается

JavaScript
1
$(this).parent(".service").remove();

Вопрос понятен, как сделать чтобы была возможность удалять только что добавленные записи

@fanatikus · 18.06.2015, 18:11

JavaScript
1
2
3
  $('.delposition').on('click',function(){
        $(this).parent().parent().remove();
    })

@tigroid3 · 22.06.2015, 09:09 **[ТС]**

fanatikus, все равно удаляет только первую запись, которая сразу создаётся, а другие нет(

@voron543 · 22.06.2015, 12:21

нужна функция которая, добавляет строку, покажите
в нее нужно добавить

JavaScript
1
2
3
$('.delposition').click(function(){
          $(this).parent().remove();
             });

@Lazy_Den · 22.06.2015, 12:36

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

нужна функция которая, добавляет строку

Не нужна.
tigroid3, если кнопка, отвечающая за удаление - id="removePos", то это уже ошибка, т.к. таких кнопок у вас будет несколько, а id у них одинаковый. Замените на класс или вообще уберите. Новые элементы у вас добавляются динамически, а значит . Форма, если я правильно понимаю, у вас имеет id="field" и она статична, кнопка удаления - class="delposition". Поэтому, записать можно так:

JavaScript
1
2
3
$( '#field' ).on('click', '.delposition', function(){
    // какие-то действия
});

@tigroid3 · 22.06.2015, 14:14 **[ТС]**

voron543,

JavaScript
1
2
3
4
5
$("#addPos").on('click', function () {
        var fld = $(".wrapper-fields").html();
        $(".other-fields").append(fld);
        return false;
    });

Добавлено через 1 минуту
Lazy_Den, id остался после теста, удаляю через класс

а чем написаное вами отличается от

JavaScript
1
2
3
4
$('.delposition').on('click',function(){
                $(this).parent().parent().remove();
                return false;
            });

@Lazy_Den · 22.06.2015, 14:29

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

а чем написаное вами отличается от

Я как бы уже сказал выше - "делегированная обработка событий". О динамически созданном элементе JS ничего не знает и для него этого элемента не существует. Поэтому обработчик устанавливается на родительский элемент, который изначально присутствует в DOM, а проверяется элемент на котором сработало событие. Если проверяемый элемент соответствует определенным критериям (напр., имеет нужный класс, id и т.д.), то выполняется соответствующее действие.

@tigroid3 · 22.06.2015, 14:58 **[ТС]**

Lazy_Den,

Всё равно удаляется только первая запись

JavaScript
1
2
3
4
5
6
$(document).ready(function () { 
$( '.field1').on('click', '.delposition', function(){
                $(this).parent().parent().remove();
                    return false;
            });
}

@Lazy_Den · 22.06.2015, 15:03

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

Всё равно удаляется только первая запись

Элемент с классом ".field1" существует при загрузке страницы или тоже добавляется динамически?

@tigroid3 · 22.06.2015, 15:09 **[ТС]**

Lazy_Den, он существует в самом начале, а по кнопке добавить создаётся копия первого field

@Lazy_Den · 22.06.2015, 15:26

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

создаётся копия первого field

Вот вам и ответ. Клонированный элемент, добавленный на страницу - такой же динамически добавленный. Повторю еще раз - обработчик устанавливайте на элемент, который изначально присутствует на странице: не добавляется в процессе, не клонируется и не материализуется из воздуха, а уже существует при загрузке DOM. Если так сложно определить такой элемент, то можно хоть на body устанавливать обработчик:

JavaScript
1
2
3
$( 'body' ).on('click', '.delposition', function(){
    // какие-то действия
});

@tigroid3 · 22.06.2015, 15:34 **[ТС]**

Lazy_Den, спасибо большое, разобрался, так заработало)

@voron543 · 22.06.2015, 15:34

не уверен , что правильно (сам только начинаю), но повесил бы так

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function () { 
("#addPos").on('click', function () {
        var fld = $(".wrapper-fields").html();
        $(".other-fields").append(fld);
        return false;
            $('.delposition').click(function(){
          $(this).parent().remove();
             });
    });
     });

@tigroid3 · 22.06.2015, 15:39 **[ТС]**

voron543, всё получилось гораздо проще

JavaScript
1
2
3
$('.other-fields').on('click', '.delposition', function () {
        $(this).parent().parent().remove();
    });

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты 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 и т. д. Сборка примера Скачайте. . .

@tigroid3 0 / 0 / 0 Регистрация: 21.12.2013 Сообщений: 20
	22.06.2015, 09:09 [ТС]
	fanatikus, все равно удаляет только первую запись, которая сразу создаётся, а другие нет( 0

@tigroid3 0 / 0 / 0 Регистрация: 21.12.2013 Сообщений: 20
	22.06.2015, 15:09 [ТС]
	Lazy_Den, он существует в самом начале, а по кнопке добавить создаётся копия первого field 0

@tigroid3 0 / 0 / 0 Регистрация: 21.12.2013 Сообщений: 20
	22.06.2015, 15:34 [ТС]
	Lazy_Den, спасибо большое, разобрался, так заработало) 0

Удаление записи после добавления

Решение