Как назначить номер дочернего элемента 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, равен * 1004. *

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

Теперь предположим, что я удаляю Child1. Я хочу, чтобы остальная часть метки была обновлена ​​со значением 1,2,3 вместо того, чтобы оставаться как 2,3,4.

другой сценарий будетесли я удаляю дочерние2 метки должны обновляться со значением 1,2,3 соответственно, а не оставаться как 1,3,4.

Как мне это сделать?

Answer 1

Во-первых, ваш HTML-код недействителен, потому что вы открываете теги label вместо закрывающих. Далее, не выполняйте встроенную обработку события в 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>