Динамическое добавление и удаление полей (input) формы

Question

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
	 <nav>
    </nav>
</header>
<main>
<div class="block-inputs">
<form name="" method="post" action="">
  <p><b>Данные</b><input type="text" size="40"><a class="del_b" href="">-</a><a class="add_b" href="">+</a>
   
  </p>

  
 </form>
</div>
<div class="err">
для дальнейшего добавления данных нужно авторизироваться
</div>
</main>
</body>
<style type="text/css">
.block-inputs {
    margin: 30px auto;
    width: 90%;
    text-align: center
}
  .add_b{
    background: green;
    padding: 5px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;

}
  .del_b{
    background: red;
    padding: 5px 7px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
}
.err{
      margin: 0 auto;
    width: 90%;
    text-align: center;
    background: red;
    color: #fff;
    height: 50px;
}
* {
   margin:0;
   padding:0;
}
input[type="text"] {
   border: 1px solid #cccccc;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   background: #ffffff !important;
   outline: none;
   height: 24px;
   width: 120px;
   color: #cccccc;
   font-size: 11px;
   font-family: Tahoma;
}
input[type="text"]:focus {
  color: #000000;
  border: 1px solid #000000
}
</style>
</html>

Answer 1

Попробуйте это:

// Добавление блока
$('.block-inputs').on('click', '.add_b', function(e) {
  e.preventDefault();
  let $parent = $(this).parent();
  let $clone = $parent.clone();
  $parent.after($clone);
  $clone.find('input').val('').focus();
});

// Удаление блока
$('.block-inputs').on('click', '.del_b', function(e) {
  e.preventDefault();
  let $parent = $(this).parent();
  // Предотвращение удаления единственного блока
  if ($parent.siblings().length) {
    $parent.remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="block-inputs">
  <form name="" method="post" action="">
    <p>
      <b>Данные</b>
      <input type="text" size="40">
      <a class="del_b" href="">-</a>
      <a class="add_b" href="">+</a>
    </p>
  </form>
</div>

БЛОГ НА HUSL

Динамическое добавление и удаление полей (input) формы

Ответы (1 шт):