如何将子 div 位置编号分配给子 div 内的标签

Question

我在父 div 中有多个子 div，每个 div 都有一个标签， 标记看起来像这样。

<div id="Parent">
    <div id="Child1" onclick="DeleteDiv('#Child1')">
        <label> 1<label>
    </div>
    <div id="Child2" onclick="DeleteDiv('#Child2')">
        <label>2<label>
    </div>
    <div id="Child3" onclick="DeleteDiv('#Child3')">
        <label>3<label>
    </div>
    <div id="Chile4" onclick="DeleteDiv('#Child4')">
        <label>4<label>
    </div>
</div>

每个子 div 都有删除选项，删除 div 的脚本是

function DeleteDiv(divtodelete) {
        $(divtodelete).remove();
    }

现在假设我删除 Child1 我希望标签的其余部分更新为值 1,2,3 而不是保持为 2,3,4。

另一种情况是，如果我删除 child2 标签，则应分别使用值 1、2、3 进行更新，而不是保持为 1、3、4。

我该怎么做？

Answer 1

首先，您的 HTML 无效，因为您打开了 label 标记而不是关闭标记。接下来don't do event handing inline in HTML，把它分开，用JavaScript做。

对于您的问题，只需在 div 被删除后遍历标签，并使用标签集合中的索引位置更新其文本：

// Set up event handlers on each of the child divs.
// Don't do event handling in HTML, do it in JavaScript
$("#Parent > div").on("click", function(event){
  this.remove();
  updateLabels();
});

function updateLabels(){
  // Loop over each label in the child divs
  $("#Parent > div > label").each(function(index){
    $(this).text(index + 1); // Update the text based on the index
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Parent">
    <div id="Child1">
        <label>1</label>
    </div>
    <div id="Child2">
        <label>2</label>
    </div>
    <div id="Child3">
        <label>3</label>
    </div>
    <div id="Child4">
        <label>4</label>
    </div>
</div>