В другом ответе, когда вы «Добавить», он копирует первый, включая контент input
, если вы его набрали.
Мне часто нравится использовать скрытые шаблоны, поэтому вот чтоЯ предлагаю вам:
- Начните только с одного элемента с
class="hidden"
.Это «шаблон». - Когда вы нажимаете Добавить , «шаблон» будет скопирован, сделан видимым и добавлен после вашего последнего элемента.
- При загрузкемы запускаем событие
click
для запуска с одним видимым элементом. - Поскольку вам следует избегать встроенного моделирования, я также перенес это в CSS.
Рабочий фрагмент:
var index = 0;
$(".test2").click(function() {
var element = $(".samplesinfo.hidden").clone(true);
element.removeClass('hidden').insertAfter(".samplesinfo:last");
element.find('.delbtn').text('Delete ' + ++index);
});
$(".accordion").click(function() {
$(this).next(".panel").toggle();
});
$(".delbtn").click(function() {
$(this).closest(".samplesinfo").remove();
});
// Trigger click on load
$(".test2").trigger('click');
.hidden{
display: none;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
float: left;
}
.delbtn {
float: right;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h2>Example</h2>
<button class="test2">ADD</button>
<div class="samplesinfo hidden">
<div class="test">
<button class="delbtn">Delete</button>
<button class="accordion">Button</button>
<div class="panel">
<input type="text" name="test">
</div>
</div>
</div>
Обратите внимание, что id
s должно быть уникальным.
this
- мощное ключевое слово, когда вы хотите нацелить элемент относительнотекущий (тот, на котором вы вызвали событие).
⋅ ⋅ ⋅
А вот версия JavaScript…
Слушатели событий не копируются с JavaScript,поэтому нам нужно вызывать функцию каждый раз, когда мы добавляем новый элемент!…
Фрагмент:
var index = 0;
var template = document.querySelector(".samplesinfo.hidden");
document.querySelector(".test2").onclick = function() {
var element = template.cloneNode(true);
element.classList.remove('hidden');
element.querySelector('.delbtn').innerText = 'Delete ' + ++index;
var samples = document.querySelectorAll(".samplesinfo");
var last = samples[samples.length - 1];
last.parentNode.insertBefore(element, last.nextSibling);
refresh_listeners();
}
// Event listeners are not copied with JavaScript, so we need to call this function each time we add a new element!…
function refresh_listeners() {
document.querySelectorAll(".accordion").forEach(function(elm) {
elm.onclick = function() {
elm.nextElementSibling.classList.toggle("hidden");
}
});
document.querySelectorAll(".delbtn").forEach(function(elm) {
elm.onclick = function() {
elm.closest(".samplesinfo").outerHTML = '';
}
});
}
// Trigger click
document.querySelector(".test2").click();
.hidden {
display: none;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
float: left;
}
.delbtn {
float: right;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h2>Example</h2>
<button class="test2">ADD</button>
<div class="samplesinfo hidden">
<div class="test">
<button class="delbtn">Delete</button>
<button class="accordion">Button</button>
<div class="panel hidden">
<input type="text" name="test">
</div>
</div>
</div>
Надеюсь, это поможет.