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

@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();
    });

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@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

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

Решение