Добавление и удаление блоков <li>
Здравствуйте. Есть 3 input'a и кнопки добавление и удаления инпутов. Как сделать так чтобы при клике на кнопку "Добавить" добавлялся еще один инпут а при нажатие на кнопку "Удалить" удалялся последний инпут. Если инпутов 3 то больше не удаляется. Максимум можно добавить 15 инпутов.
P.S. Как можно добавлять инпут вместе с автоматическим значением name=""? Например: <input type="text" name="input_1"> <input type="text" name="input_2"> <input type="text" name="input_3"> Код: Ссылка на plnkr.co - http://plnkr.co/edit/zTQkPJaMvAM07a7g28it?p=preview <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ol> <li><input type="text"></li> <li><input type="text"></li> <li><input type="text"></li> </ol> <div> <a href="">Добавить</a> </div> <div> <a href="">Удалить</a> </div> </body> </html> |
NellDenZ,
<ol id="list"> <li><input type="text"></li> <li><input type="text"></li> <li><input type="text"></li> </ol> <button id="add" type="button">Добавить</button> <button id="remove" type="button">Удалить</button> var $list = document.getElementById('list'); var $addBtn = document.getElementById('add'); var $removeBtn = document.getElementById('remove'); $addBtn.addEventListener('click', function (event) { if ($list.children.length < 15) { var $li = document.createElement('li'); var $input = document.createElement('input'); $input.type = "text"; $input.name = "лентяй"; $li.appendChild($input); $list.appendChild($li); }; }); $removeBtn.addEventListener('click', function (event) { $list.lastElementChild && $list.removeChild($list.lastElementChild); }); |
Спасибо за помощь, вот только что то не работает. Проверял на plnkr.co - ссылка на проект http://plnkr.co/edit/zTQkPJaMvAM07a7g28it?p=preview
|
NellDenZ,
Проверяльщик ты скрипт перед закрытием боди положи |
Еще вариантец. Но тут игра "найди баг"))
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ol> <li><input type="text"></li> <li><input type="text"></li> <li><input type="text"></li> </ol> <div> <a href="" onclick='event.preventDefault();addInput()'>Добавить</a> </div> <div> <a href="" onClick='event.preventDefault();removeInput()'>Удалить</a> </div> <script> var list = document.getElementsByTagName('ol')[0]; function addInput() { list.children.length <=14 && list.append(list.children[0].cloneNode(true)); } function removeInput(){ list.children.length >= 4 && list.children[list.children.length-1].remove(); } </script> </body> </html> |
Часовой пояс GMT +3, время: 21:15. |