0

Подскажите, как при клике на плюс добавить еще 1 input, а при клике на минус удалить input?

jQuery(document).ready(function($) {
  $('.multi .plus').click(function() {
    var html = $(this).parent('.multi').find('.box').html();
    $(this).parent('.multi').find('.box').append(html);
    return false;
  });
});
.add-partner button {
  padding: 0 70px;
  margin-top: 20px;
}

.add-partner .data-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}

.add-partner .data-box .item {
  display: grid;
}

.add-partner .data-box .item.text {
  grid-column: 1/3;
}

.add-partner .data-box .item.idea {
  grid-column: 3/5;
}

.add-partner .data-box .item label {
  margin-bottom: 5px;
}

.add-partner .data-box .item.multi {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.add-partner .data-box .item.multi label {
  width: 100%;
}

.add-partner .data-box .item.multi .box-btn {
  margin-left: 5px;
  display: grid;
  grid-gap: 5px;
}

.add-partner .data-box .item.multi .box {
  width: -webkit-calc(100% - 35px);
  width: calc(100% - 35px);
  display: grid;
}

.add-partner .data-box .item .plus {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2c2c2c;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.add-partner .data-box .item .plus:before {
  content: '+';
  font-size: 28px;
}

.add-partner .data-box .item .minus {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2c2c2c;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.add-partner .data-box .item .minus:before {
  content: '-';
  font-size: 28px;
}

.add-partner .data-box .item .plus:hover,
.add-partner .data-box .item .minus:hover {
  background-color: #b3b3b3;
  cursor: pointer;
}

input,
select {
  height: 45px;
  padding: 0 20px;
  display: flex;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 16px;
  align-items: center;
  border: 1px solid #b3b3b3;
}

textarea {
  padding: 20px;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 16px;
  display: flex;
  align-items: center;
  border: 1px solid #b3b3b3;
}

.btn-gray {
  height: 50px;
  padding: 0 20px;
  font-family: 'Lato';
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b3b3b3;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 400;
  border: none;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form action="" class="add-partner">
  <div class="data-box">
    <div class="item">
      <label for="">Имя:</label>
      <input type="text" placeholder="Имя">
    </div>
    <div class="item">
      <label for="">Тип клиента:</label>
      <select name="" id="">
        <option value="">Интернет-магазин</option>
      </select>
    </div>
    <div class="item sites multi">
      <label for="">Адрес Вашего сайта или группы:</label>
      <div class="box">
        <input type="text">
      </div>
      <div class="box-btn">
        <span class="plus"></span>
        <span class="minus"></span>
      </div>
    </div>
    <div class="item social multi">
      <label for="">Адрес Вашей страницы в соц. сети:</label>
      <div class="box">
        <input type="text">
      </div>
      <div class="box-btn">
        <span class="plus"></span>
      </div>
    </div>
    <div class="item text">
      <label for="">Какие минусы вы наблюдаете у нашей компании:</label>
      <textarea name="" id="" cols="30" rows="5" placeholder="Введите текст"></textarea>
    </div>
    <div class="item idea">
      <label for="">Ваши пожелания и идеи:</label>
      <textarea name="" id="" cols="30" rows="5" placeholder="Введите текст"></textarea>
    </div>
    <div class="item">
      <label for="">E-mail:</label>
      <input type="text" placeholder="E-mail:">
    </div>
  </div>
  <button class="btn-gray">Участвовать</button>
</form>

2 ответа 2

0

jQuery(document).ready(function($) {

  $('.multi .plus').click(function() {
    var html = $(this).parent().parent('.multi').find('.box input').last().clone();
    $(this).parent().parent('.multi').find('.box').append(html);
  });

  $('.multi .minus').click(function() {
    var html = $(this).parent().parent('.multi').find('.box').html();
    $(this).parent().parent('.multi').find('.box input').last().remove();
  });
});
.add-partner button {
  padding: 0 70px;
  margin-top: 20px;
}

.add-partner .data-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}

.add-partner .data-box .item {
  display: grid;
}

.add-partner .data-box .item.text {
  grid-column: 1/3;
}

.add-partner .data-box .item.idea {
  grid-column: 3/5;
}

.add-partner .data-box .item label {
  margin-bottom: 5px;
}

.add-partner .data-box .item.multi {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.add-partner .data-box .item.multi label {
  width: 100%;
}

.add-partner .data-box .item.multi .box-btn {
  margin-left: 5px;
  display: grid;
  grid-gap: 5px;
}

.add-partner .data-box .item.multi .box {
  width: -webkit-calc(100% - 35px);
  width: calc(100% - 35px);
  display: grid;
}

.add-partner .data-box .item .plus {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2c2c2c;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.add-partner .data-box .item .plus:before {
  content: '+';
  font-size: 28px;
}

.add-partner .data-box .item .minus {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2c2c2c;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.add-partner .data-box .item .minus:before {
  content: '-';
  font-size: 28px;
}

.add-partner .data-box .item .plus:hover,
.add-partner .data-box .item .minus:hover {
  background-color: #b3b3b3;
  cursor: pointer;
}

input,
select {
  height: 45px;
  padding: 0 20px;
  display: flex;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 16px;
  align-items: center;
  border: 1px solid #b3b3b3;
}

textarea {
  padding: 20px;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 16px;
  display: flex;
  align-items: center;
  border: 1px solid #b3b3b3;
}

.btn-gray {
  height: 50px;
  padding: 0 20px;
  font-family: 'Lato';
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b3b3b3;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 400;
  border: none;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form action="" class="add-partner">
  <div class="data-box">
    <div class="item">
      <label for="">Имя:</label>
      <input type="text" placeholder="Имя">
    </div>
    <div class="item">
      <label for="">Тип клиента:</label>
      <select name="" id="">
        <option value="">Интернет-магазин</option>
      </select>
    </div>
    <div class="item sites multi">
      <label for="">Адрес Вашего сайта или группы:</label>
      <div class="box">
        <input type="text">
      </div>
      <div class="box-btn">
        <span class="plus"></span>
        <span class="minus"></span>
      </div>
    </div>
    <div class="item social multi">
      <label for="">Адрес Вашей страницы в соц. сети:</label>
      <div class="box">
        <input type="text">
      </div>
      <div class="box-btn">
        <span class="plus"></span>
      </div>
    </div>
    <div class="item text">
      <label for="">Какие минусы вы наблюдаете у нашей компании:</label>
      <textarea name="" id="" cols="30" rows="5" placeholder="Введите текст"></textarea>
    </div>
    <div class="item idea">
      <label for="">Ваши пожелания и идеи:</label>
      <textarea name="" id="" cols="30" rows="5" placeholder="Введите текст"></textarea>
    </div>
    <div class="item">
      <label for="">E-mail:</label>
      <input type="text" placeholder="E-mail:">
    </div>
  </div>
  <button class="btn-gray">Участвовать</button>
</form>

0

.clone(), .remove(), .siblings(), .find()

jQuery(document).ready(function($) {
  $(".box-btn").click(function(e) {
    var $target = $(e.target);
    var $currentTarget = $(e.currentTarget);
    var $input = $currentTarget.siblings(".box").find("input:first-child");
    var action = $target.attr("class");
    if (action === "plus") {
      $input.clone().appendTo($currentTarget.siblings(".box"));
    }
    if (action === "minus") {
      $input.remove();
    }
  });
});
.add-partner button {
  padding: 0 70px;
  margin-top: 20px;
}

.add-partner .data-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}

.add-partner .data-box .item {
  display: grid;
}

.add-partner .data-box .item.text {
  grid-column: 1/3;
}

.add-partner .data-box .item.idea {
  grid-column: 3/5;
}

.add-partner .data-box .item label {
  margin-bottom: 5px;
}

.add-partner .data-box .item.multi {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.add-partner .data-box .item.multi label {
  width: 100%;
}

.add-partner .data-box .item.multi .box-btn {
  margin-left: 5px;
  display: grid;
  grid-gap: 5px;
}

.add-partner .data-box .item.multi .box {
  width: -webkit-calc(100% - 35px);
  width: calc(100% - 35px);
  display: grid;
}

.add-partner .data-box .item .plus {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2c2c2c;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.add-partner .data-box .item .plus:before {
  content: '+';
  font-size: 28px;
}

.add-partner .data-box .item .minus {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2c2c2c;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.add-partner .data-box .item .minus:before {
  content: '-';
  font-size: 28px;
}

.add-partner .data-box .item .plus:hover,
.add-partner .data-box .item .minus:hover {
  background-color: #b3b3b3;
  cursor: pointer;
}

input,
select {
  height: 45px;
  padding: 0 20px;
  display: flex;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 16px;
  align-items: center;
  border: 1px solid #b3b3b3;
}

textarea {
  padding: 20px;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 16px;
  display: flex;
  align-items: center;
  border: 1px solid #b3b3b3;
}

.btn-gray {
  height: 50px;
  padding: 0 20px;
  font-family: 'Lato';
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b3b3b3;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 400;
  border: none;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form action="" class="add-partner">
  <div class="data-box">
    <div class="item">
      <label for="">Имя:</label>
      <input type="text" placeholder="Имя">
    </div>
    <div class="item">
      <label for="">Тип клиента:</label>
      <select name="" id="">
        <option value="">Интернет-магазин</option>
      </select>
    </div>
    <div class="item sites multi">
      <label for="">Адрес Вашего сайта или группы:</label>
      <div class="box">
        <input type="text">
      </div>
      <div class="box-btn">
        <span class="plus"></span>
        <span class="minus"></span>
      </div>
    </div>
    <div class="item social multi">
      <label for="">Адрес Вашей страницы в соц. сети:</label>
      <div class="box">
        <input type="text">
      </div>
      <div class="box-btn">
        <span class="plus"></span>
      </div>
    </div>
    <div class="item text">
      <label for="">Какие минусы вы наблюдаете у нашей компании:</label>
      <textarea name="" id="" cols="30" rows="5" placeholder="Введите текст"></textarea>
    </div>
    <div class="item idea">
      <label for="">Ваши пожелания и идеи:</label>
      <textarea name="" id="" cols="30" rows="5" placeholder="Введите текст"></textarea>
    </div>
    <div class="item">
      <label for="">E-mail:</label>
      <input type="text" placeholder="E-mail:">
    </div>
  </div>
  <button class="btn-gray">Участвовать</button>
</form>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.