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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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