Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
1

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

18.06.2015, 17:38. Просмотров 889. Ответов 13
Метки нет (Все метки)

У меня есть форма 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();
Вопрос понятен, как сделать чтобы была возможность удалять только что добавленные записи
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.06.2015, 17:38
Ответы с готовыми решениями:

Удаление куки вместо добавления
Здравствуйте, нужно вместо добавления сделать удаление куки function SubCat(SubID,Url){...

Вызов функции после добавления элементов на страницу
js начинает выполняться после addEventListener('load', test, false); Функция test делает 2...

Обноление select после добавления данных через ajax
С сервера пришли данные в формате: &lt;option selected&gt;--&lt;/option&gt; &lt;option selected&gt;info&lt;/option&gt;...

Перестает работать код после добавления события onclick
Здравствуйте, помогите, пожалуйста. Есть код: $(document).ready(function() { //...

Обновить select после добавления options через javascript
На странице есть элемент select с одним пустым option. По событию onclick (при этом раскрывается...

13
fanatikus
1172 / 1139 / 536
Регистрация: 17.11.2012
Сообщений: 5,078
18.06.2015, 18:11 2
Javascript
1
2
3
  $('.delposition').on('click',function(){
        $(this).parent().parent().remove();
    })
0
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
22.06.2015, 09:09  [ТС] 3
fanatikus, все равно удаляет только первую запись, которая сразу создаётся, а другие нет(
0
voron543
0 / 0 / 0
Регистрация: 07.05.2015
Сообщений: 6
22.06.2015, 12:21 4
нужна функция которая, добавляет строку, покажите
в нее нужно добавить
Javascript
1
2
3
$('.delposition').click(function(){
          $(this).parent().remove();
             });
0
22.06.2015, 12:21
Lazy_Den
3098 / 2725 / 1369
Регистрация: 15.01.2014
Сообщений: 6,005
22.06.2015, 12:36 5
Цитата Сообщение от voron543 Посмотреть сообщение
нужна функция которая, добавляет строку
Не нужна.
tigroid3, если кнопка, отвечающая за удаление - id="removePos", то это уже ошибка, т.к. таких кнопок у вас будет несколько, а id у них одинаковый. Замените на класс или вообще уберите. Новые элементы у вас добавляются динамически, а значит . Форма, если я правильно понимаю, у вас имеет id="field" и она статична, кнопка удаления - class="delposition". Поэтому, записать можно так:

Javascript
1
2
3
$( '#field' ).on('click', '.delposition', function(){
    // какие-то действия
});
0
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
22.06.2015, 14:14  [ТС] 6
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;
            });
0
Lazy_Den
3098 / 2725 / 1369
Регистрация: 15.01.2014
Сообщений: 6,005
22.06.2015, 14:29 7
Цитата Сообщение от tigroid3 Посмотреть сообщение
а чем написаное вами отличается от
Я как бы уже сказал выше - "делегированная обработка событий". О динамически созданном элементе JS ничего не знает и для него этого элемента не существует. Поэтому обработчик устанавливается на родительский элемент, который изначально присутствует в DOM, а проверяется элемент на котором сработало событие. Если проверяемый элемент соответствует определенным критериям (напр., имеет нужный класс, id и т.д.), то выполняется соответствующее действие.
0
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
22.06.2015, 14:58  [ТС] 8
Lazy_Den,

Всё равно удаляется только первая запись
Javascript
1
2
3
4
5
6
$(document).ready(function () { 
$( '.field1').on('click', '.delposition', function(){
                $(this).parent().parent().remove();
                    return false;
            });
}
0
Lazy_Den
3098 / 2725 / 1369
Регистрация: 15.01.2014
Сообщений: 6,005
22.06.2015, 15:03 9
Цитата Сообщение от tigroid3 Посмотреть сообщение
Всё равно удаляется только первая запись
Элемент с классом ".field1" существует при загрузке страницы или тоже добавляется динамически?
0
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
22.06.2015, 15:09  [ТС] 10
Lazy_Den, он существует в самом начале, а по кнопке добавить создаётся копия первого field
0
Lazy_Den
3098 / 2725 / 1369
Регистрация: 15.01.2014
Сообщений: 6,005
22.06.2015, 15:26 11
Лучший ответ Сообщение было отмечено tigroid3 как решение

Решение

Цитата Сообщение от tigroid3 Посмотреть сообщение
создаётся копия первого field
Вот вам и ответ. Клонированный элемент, добавленный на страницу - такой же динамически добавленный. Повторю еще раз - обработчик устанавливайте на элемент, который изначально присутствует на странице: не добавляется в процессе, не клонируется и не материализуется из воздуха, а уже существует при загрузке DOM. Если так сложно определить такой элемент, то можно хоть на body устанавливать обработчик:
Javascript
1
2
3
$( 'body' ).on('click', '.delposition', function(){
    // какие-то действия
});
1
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
22.06.2015, 15:34  [ТС] 12
Lazy_Den, спасибо большое, разобрался, так заработало)
0
voron543
0 / 0 / 0
Регистрация: 07.05.2015
Сообщений: 6
22.06.2015, 15:34 13
не уверен , что правильно (сам только начинаю), но повесил бы так
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();
             });
    });
     });
0
tigroid3
0 / 0 / 0
Регистрация: 21.12.2013
Сообщений: 20
22.06.2015, 15:39  [ТС] 14
voron543, всё получилось гораздо проще

Javascript
1
2
3
$('.other-fields').on('click', '.delposition', function () {
        $(this).parent().parent().remove();
    });
0
22.06.2015, 15:39
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.06.2015, 15:39

Применение сценария после добавления объекта через prepend
Добавляю li в список при помощи prepend: //добавление элемента...

После добавления цикла и условий перестал работать код
Здравствуйте! Очень нужна ваша подсказка. Накорябал вот такой код: &lt;script...

Не происходит отправка формы после динамического добавления полей
Не происходит отправка формы в базу данных MYSQL после динамического добавления полей Все items0...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru