How to dynamically add multiple click selectors?

Question

There is such a form skrinshoter.ru/s/240516/pp5TvW?a (on the left a section, on the right an element)

Here is the approximate markup selectors:

<div class="row"> <div class="col-md-4"> <p class="select-head-p">1.Выберите категорию продукции</p> <select> <option>Микрокальцит</option> <option>Мраморная крошка,песок</option> <option>Щебень</option> <option>Минеральный порошок</option> <option>Каолин</option> <option>Химические реагенты</option> </select> </div> <div class="col-md-4"> <p class="select-head-p">2.Выберите фракцию/товар</p> <div class="dynamic-form"> </div> <select> <option>Микрокальцит стандарт, фракция 2мкм.</option> <option>Микрокальцит стандарт, фракция 3мкм</option> <option>Микрокальцит стандарт, фракция 60мкм</option> <option>Микрокальцит стандарт, фракция 80мкм</option> <option>Микрокальцит стандарт, фракция 150мкм</option> <option>Микрокальцит стандарт, фракция 120мкм</option> <option>Микрокальцит стандарт, фракция 10мкм</option> <option>Микрокальцит стандарт, фракция 50мкм</option> <option>Микрокальцит стандарт, фракция 3мкм</option> </select> </div>

How can I add on the click, for example on "+", the exact same markup below? to that was some lines with? also need to have delete this line (if pressed accidentally)

  <script> $(".wrap_send_zay").on("click", ".add__content", function(event){ $(".select-dublicate_dynamic").clone(true).insertBefore(event.target) }); $(".wrap_send_zay").on("click", ".delete__content", function(event){ if($(".wrap_send_zay .select-dublicate_dynamic").length > 1){ $(event.target).closest(".row").detach(); } }); </script>

this is a slightly upgraded script

Alex Krass Alex Krass 13.9k one 18 46 · Accepted Answer · 2016-05-25T13:03:15

As far as I understand the site uses Bootstrap, why not use JQuery? Keep in mind that if there is no jQuery tag, then the answers do not assume its content on the site. In general, use special functions for cloning, adding and deleting in both native JS and JQuery.

Native javascript

 document.querySelector(".tb").addEventListener("click", function(e){ if(e.target.nodeName == "BUTTON" && e.target.className.indexOf("add") > -1){ newRow = document.querySelector(".row").cloneNode(true); this.insertBefore(newRow, e.target) } if(e.target.nodeName == "BUTTON" && e.target.className.indexOf("del") > -1 && document.querySelectorAll(".row").length > 1){ delRow = e.target.parentNode this.removeChild(delRow) } })

 <div class="tb"> <div class="row"> <div class="col-md-4"> <p class="select-head-p">1.Выберите категорию продукции</p> <select> <option>Микрокальцит</option> <option>Мраморная крошка,песок</option> <option>Щебень</option> <option>Минеральный порошок</option> <option>Каолин</option> <option>Химические реагенты</option> </select> </div> <div class="col-md-4"> <p class="select-head-p">2.Выберите фракцию/товар</p> <div class="dynamic-form"> </div> <select> <option>Микрокальцит стандарт, фракция 2мкм.</option> <option>Микрокальцит стандарт, фракция 3мкм</option> <option>Микрокальцит стандарт, фракция 60мкм</option> <option>Микрокальцит стандарт, фракция 80мкм</option> <option>Микрокальцит стандарт, фракция 150мкм</option> <option>Микрокальцит стандарт, фракция 120мкм</option> <option>Микрокальцит стандарт, фракция 10мкм</option> <option>Микрокальцит стандарт, фракция 50мкм</option> <option>Микрокальцит стандарт, фракция 3мкм</option> </select> </div> <button class="del">удалить</button> </div> <button class="add">добавить</button> </div>

Jquery library

 $(".tb").on("click", ".add", function(event){ $(".row").clone(true).insertBefore(event.target) }); $(".tb").on("click", ".del", function(event){ if($(".tb .row").length > 1){ $(event.target).closest(".row").detach(); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tb"> <div class="row"> <div class="col-md-4"> <p class="select-head-p">1.Выберите категорию продукции</p> <select> <option>Микрокальцит</option> <option>Мраморная крошка,песок</option> <option>Щебень</option> <option>Минеральный порошок</option> <option>Каолин</option> <option>Химические реагенты</option> </select> </div> <div class="col-md-4"> <p class="select-head-p">2.Выберите фракцию/товар</p> <div class="dynamic-form"> </div> <select> <option>Микрокальцит стандарт, фракция 2мкм.</option> <option>Микрокальцит стандарт, фракция 3мкм</option> <option>Микрокальцит стандарт, фракция 60мкм</option> <option>Микрокальцит стандарт, фракция 80мкм</option> <option>Микрокальцит стандарт, фракция 150мкм</option> <option>Микрокальцит стандарт, фракция 120мкм</option> <option>Микрокальцит стандарт, фракция 10мкм</option> <option>Микрокальцит стандарт, фракция 50мкм</option> <option>Микрокальцит стандарт, фракция 3мкм</option> </select> </div> <button class="del">удалить</button> </div> <button class="add">добавить</button> </div>

Thank you very much @Alex Krass, I upgraded the code a bit and I had problems alfa.maxkondaurov.ru here you can find the form skrinshoter.ru/s/260516/3hKv1j?a , I almost did not change the script, the problem is that if several times press ++, then first 2 selectors are cloned, then 4, etc., and you have to add 2 each time
@ YegorTregubenko, I would advise you to change the markup of the form, otherwise you will have to pervert a lot.
Make the main row as col-md-8 (for point 1 and 2) + col-md-4 (point 3 for contacts).
Inside the first col-md-8 column, make another row in which there are two col-md-6.
In this case, you can already realize normal copying and the form will not lose its appearance.
@ Alex Krass But how can I get rid of <p class = "select-head-p"> 2. Select the fraction / product </ p>, if I want only selections to be added?
And yes, there probably was an array being copied and it was necessary to add a call to eq(0) before clone(true) eq(0) .
I corrected the markup to separate <p> and <select> and the code, also added classes for the script, so as not to be confused, look: jsfiddle.net/jLj6k5vy

How to dynamically add multiple click selectors?

1 answer 1

More articles: