Форум

NellDenZ · #1 (**permalink**) 23.11.2016, 20:03

Здравствуйте. Есть 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>

Coriolan161 · #2 (**permalink**) 23.11.2016, 22:32

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

NellDenZ · #3 (**permalink**) 23.11.2016, 22:50

Спасибо за помощь, вот только что то не работает. Проверял на plnkr.co - ссылка на проект http://plnkr.co/edit/zTQkPJaMvAM07a7g28it?p=preview

Coriolan161 · #4 (**permalink**) 23.11.2016, 23:26

NellDenZ,
Проверяльщик ты скрипт перед закрытием боди положи

Царь Леонид · #5 (**permalink**) 24.11.2016, 11:33

Еще вариантец. Но тут игра "найди баг"))

<!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>

Форум

Справочник

Discord чат

Курсы javascript