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

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

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

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

HTML5

<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

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

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

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

Javascript

$('.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

$(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

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

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

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

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	22.06.2015, 14:29	7
	Сообщение от tigroid3 а чем написаное вами отличается от Я как бы уже сказал выше - "делегированная обработка событий". О динамически созданном элементе JS ничего не знает и для него этого элемента не существует. Поэтому обработчик устанавливается на родительский элемент, который изначально присутствует в DOM, а проверяется элемент на котором сработало событие. Если проверяемый элемент соответствует определенным критериям (напр., имеет нужный класс, id и т.д.), то выполняется соответствующее действие. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	22.06.2015, 15:03	9
	Сообщение от tigroid3 Всё равно удаляется только первая запись Элемент с классом ".field1" существует при загрузке страницы или тоже добавляется динамически? 0

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

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

Решение