![](/img/trans.png)
[英]How can I reset the index within an each loop after the index has hit a specific number
[英]how can the append count the index each time and when remove it can reset the entire index in js
append如何每次都计算索引以及删除它时可以重置js中的整个索引
$('button#add_ticket').click(function(e) {
$('#ticket_content').append(
`<div class="partials">
<div class="heading">
<div class='box'>
<div>
test
</div>
</div>
<div>
<button onclick="removeRow(this)" type="button" class="btn btn-primary">X</button>
</div>
</div>
</div>`
)
})
function removeRow(e) {
e.parentElement.parentNode.parentElement.remove();
}
这是代码
<div id='ticket_content'></div>
<button id='add_ticket' type="button"></button>
您不需要使用 JS 和索引来计算附加元素,您可以简单地使用 CSS:
MDN - Using_CSS_counters
$('#add_ticket').on("click", function(e) { $('#ticket_content').append( `<div class="partials__box"> <div class="heading d-flex"> <div class='box-header'> <div class='header-box bases__text-bold bases__font--18'> test </div> </div> <div class='box-header'> <button onclick="removeRow(this)" type="button" class="btn btn-primary">X</button> </div> </div> <div class="body"></div> </div>` ); }); function removeRow(el) { $(el).closest(".partials__box").remove(); }
#ticket_content { counter-reset: ticket; }.partials__box::before { counter-increment: ticket; content: counter(ticket) ". "; }
<div id='ticket_content'></div> <button id='add_ticket' type="button">ADD</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.