Подскажите, как при клике на плюс добавить еще 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>