javascript - 每次追加如何计算索引以及何时删除它可以重置js中的整个索引

Question

每次追加如何计算索引以及何时删除它可以重置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>

标签： javascript

Answer 1

您不需要使用 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>