Необходимо на jquery сделать добавление/удаление блока с контентом

@EvgenStor · Регистрация: 06.10.2013

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

Приветствую,

в общем суть следующая, необходимо сделать функцию по добавлению и удалению блока div с полями input.

Изначально имеем только блок "Товар №1" он должен оставаться всегда, нужно сделать возможность что бы по желанию пользователь мог добавить или удалить дополнительные блоки "Товар №2 - Товар №5" , т.е. вставить или удалить код нажатием на кнопку добавить/удалить. Желательно именно добавить/удалить, а не скрыть/показать.
С Jquery знаком только поверхностно, самому не разобраться, поэтому прошу помочь, отозвавшимся заранее спасибо!

Рабочий код:

HTML5

<form enctype="text/plain" id="checkout-form" method="POST" action="" class="methods-list" onsubmit="return shopCheckOut();">
  <input type="hidden" name="mode" value="change" id="checkout-form-mode">
  <input type="hidden" name="ssid" id="checkout-form-ssid" value="$SSID$">
  <input type="hidden" name="payment_id" value="2" id="payment_id">
  <input type="hidden" name="delivery_id" value="2" id="delivery_id">
 
  <div><input type="text" class="fw text" name="fld3" id="order-fld-3" value="" placeholder="Имя, Фамилия*"></div>
  <div><input type="text" class="fw text" name="fld2" id="order-fld-2" value="" placeholder="Адрес (ул, дом, кв.)*"></div>
  <div><input type="text" class="fw text" name="fld5" id="order-fld-5" value="" placeholder="Индекс, Город*"></div>
  <div><select name="fld7" id="order-fld-7">
                    <option value="Россия" selected="">Россия</option>
                    <option value="Беларусь">Беларусь</option>
                    <option value="Украина">Украина</option>
                    <option value="Казахстан">Казахстан</option>
                    <option value="Кыргызстан">Кыргызстан</option>
                    </select>
  </div>
  <div><input type="text" class="fw text" name="fld8" id="order-fld-8" value="" placeholder="E-mail*"></div>
  <div><input type="text" class="fw text" name="fld1" id="order-fld-1" value="" placeholder="Контактный телефон*"></div>
  <div><input type="text" class="fw text" name="fld9" id="order-fld-9" value="" placeholder="Мобильный телефон"></div>
 
  <div>
    <table>
      <tbody>
        <tr>
          <td><input type="text" class="text promo" value="" name="fld12" id="order-fld-12" placeholder="Код скидки/купона/акции"></td>
          <td><input type="button" value="Проверить код" onclick="checkPromo('12')"></td>
          <td id="res12" style="display:none;"><img src="/.s/img/icon/ajsml.gif"></td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>
 
  <div id="add-goods">
    <h2>Добавить товары</h2>
    <div class="goods-1">
      <h3>Товар №1</h3>
      <input type="text" class="fw text" name="fld13" id="order-fld-13" value="" placeholder="Название товара">
      <input type="text" class="fw text" name="fld14" id="order-fld-14" value="" placeholder="Ссылка на товар">
      <input type="text" class="fw text" name="fld15" id="order-fld-15" value="" placeholder="Цена в магазине">
      <input type="text" class="fw text" name="fld16" id="order-fld-16" value="" placeholder="Доставка из магазина">
    </div>
    <div class="goods-2">
      <h3>Товар №2</h3>
      <input type="text" class="fw text" name="fld17" id="order-fld-17" value="" placeholder="Название товара">
      <input type="text" class="fw text" name="fld18" id="order-fld-18" value="" placeholder="Ссылка на товар">
      <input type="text" class="fw text" name="fld19" id="order-fld-19" value="" placeholder="Цена в магазине">
      <input type="text" class="fw text" name="fld20" id="order-fld-20" value="" placeholder="Доставка из магазина">
    </div>
    <div class="goods-3">
      <h3>Товар №3</h3>
      <input type="text" class="fw text" name="fld21" id="order-fld-21" value="" placeholder="Название товара">
      <input type="text" class="fw text" name="fld22" id="order-fld-22" value="" placeholder="Ссылка на товар">
      <input type="text" class="fw text" name="fld23" id="order-fld-23" value="" placeholder="Цена в магазине">
      <input type="text" class="fw text" name="fld24" id="order-fld-24" value="" placeholder="Доставка из магазина">
    </div>
    <div class="goods-4">
      <h3>Товар №4</h3>
      <input type="text" class="fw text" name="fld25" id="order-fld-25" value="" placeholder="Название товара">
      <input type="text" class="fw text" name="fld26" id="order-fld-26" value="" placeholder="Ссылка на товар">
      <input type="text" class="fw text" name="fld27" id="order-fld-27" value="" placeholder="Цена в магазине">
      <input type="text" class="fw text" name="fld28" id="order-fld-28" value="" placeholder="Доставка из магазина">
    </div>
    <div class="goods-5">
      <h3>Товар №5</h3>
      <input type="text" class="fw text" name="fld29" id="order-fld-29" value="" placeholder="Название товара">
      <input type="text" class="fw text" name="fld30" id="order-fld-30" value="" placeholder="Ссылка на товар">
      <input type="text" class="fw text" name="fld31" id="order-fld-31" value="" placeholder="Цена в магазине">
      <input type="text" class="fw text" name="fld32" id="order-fld-32" value="" placeholder="Доставка из магазина">
    </div>
  </div>
 
</form>

Песочница: http://codepen.io/EvgenStor/pen/RooZyB

Пример того что хотелось бы получить: http://express2russia.bunddler.com/web

Добавлено через 2 часа 21 минуту
Смастерил вот такую конструкцию, но цикл не работает до конца (вторая часть скрипта), подскажите почему?

HTML5

<div class="add-cut">
<button class="add">Добавить</button>
</div>
<ul class="l1">
   <li class="it1">Название</li>    
   <li class="it2">Цена</li>    
 </ul>

Javascript

$('.add').bind('click', function() {
  $('<ul class="l2"><li class="it1">Название</li><li class="item it2">Цена</li></ul>').insertAfter($('.l1'));
  $(".add-cut").empty();
  $('<button class="cut">Удалить</button>').prependTo($('.add-cut'));
});
 
$('.cut').bind('click', function() {
    $(".add-cut").empty();
  $('<button class="add">Добавить</button>').prependTo($('.add-cut'));
});

@vettel · 18.11.2016, 19:13

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

но цикл не работает до конца (вторая часть скрипта), подскажите почему?

Потому что вы вешаете обработчик на элемент до того, как он появится на странице (а появится он только после клика).
Вместо этого обработчика юзайте другой:

Javascript

$('.add-cut').on('click', '.cut', function() {
    $(".add-cut").empty();
  $('<button class="add">Добавить</button>').prependTo($('.add-cut'));
});

@PeterLS · 18.11.2016, 19:14

Накидал, примерно так должно получится:

HTML5

<a href="#" class="add">Добавить</a>
<div class="items">
    <div class="item">1) Название - Цена (<a href="#" class="del">Удалить</a>)</div>
</div>

Javascript

$(".add").on("click", function(){
    var i = $(".item").length + 1;
    $(".items").append('<div class="item">'+i+') Название - Цена (<a href="#" class="del">Удалить</a>)</div>');
});
$(".items").on("click", ".del", function(){
    $(this).parent().remove();
});

@EvgenStor · 18.11.2016, 20:27 **[ТС]**

vettel, спасибо сделал! То что и надо было! Но почему не работает этот метод при добавлении третьего блока?

Результат: http://codepen.io/EvgenStor/pen/JbEjMP

HTML5

<div class="l1">
  <div>Инфо №1</div>
  <div class="add-cut"><button class="add">Добавить</button></div>
</div>

Javascript

$('.add-cut').on('click', '.add', function() {
  $(".add-cut").empty();
  $('<div class="l2"><div>Инфо №2</div><div class="add-cut-2"><button class="add-2">Добавить</button></div></div>').insertAfter($('.l1'));
  $('<button class="cut">Удалить</button>').prependTo($('.add-cut'));
});
 
$('.add-cut').on('click', '.cut', function() {
  $(".add-cut").empty();
  $('<button class="add">Добавить</button>').prependTo($('.add-cut'));
  $(".l2").remove();
});
 
$('.add-cut-2').on('click', '.add-2', function() {
  $(".add-cut-2").empty();
  $('<div class="l3"><div>Инфо №3</div><div class="add-cut-3"><button class="add-3">Добавить</button></div></div>').insertAfter($('.l2'));
  $('<button class="cut-2">Удалить</button>').prependTo($('.add-cut-2'));
  
});

PeterLS, Ваш способ тоже интересный, но не знаю как его реализовать

@vettel · 18.11.2016, 20:41

EvgenStor,
та же самая проблема же:

Javascript

1	$('.add-cut-2').on

У вас add-cut-2 появится только после клика по первому, и в момент обработки скрипта (когда он вешает обработчик) этого элемента еще на странице нет.

@EvgenStor · 18.11.2016, 20:53 **[ТС]**

vettel, это все понятно, что делать то? Мне таких блоков 5 штук надо "Матрешка"

, как быть?

@vettel · 18.11.2016, 21:12

EvgenStor, я б на вашем месте поискал возможность стандартизовать добавляющиеся списки, чтобы можно было решить задачу одним скриптом, а не 5-ю однотипными.

@EvgenStor 1 / 1 / 0 Регистрация: 06.10.2013 Сообщений: 25
	18.11.2016, 20:53 [ТС]	6
	vettel, это все понятно, что делать то? Мне таких блоков 5 штук надо "Матрешка" , как быть? 0

@vettel 84 / 84 / 41 Регистрация: 14.02.2015 Сообщений: 320
	18.11.2016, 21:12	7
	EvgenStor, я б на вашем месте поискал возможность стандартизовать добавляющиеся списки, чтобы можно было решить задачу одним скриптом, а не 5-ю однотипными. 0

Опции темы

Необходимо на jquery сделать добавление/удаление блока с контентом

Решение