How to assign child div position number to a label inside the child div

Question

I have number of child divs inside a parent div and each div has a label, markup looks something like this.

<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>

each child div has delete option and script that deletes the div is

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

Now let's say I delete Child1 I want rest of the label to be updated with the value 1,2,3 instead of remaining as 2,3,4.

another scenario would be if I delete child2 labels should be updated with value 1,2,3 respectively instead of remaining as 1,3,4.

How do I do this?

add same class to all childs. Then after `remove()`, select all remaining with `$(".commonClass")`, loop through and change it labels according to index of the loop — Calvin Nunes, Sep 30 '19 at 16:32
Like @CalvinNunes said, or iterate all children elements of `Parent` — GalAbra, Sep 30 '19 at 16:33
Welcome to SO, please have a read of the [tour] and [ask]. In this case, you'd be expected to have made at least an attempt (and included that attempt here). Without the evidence of an attempt, it looks like you're asking for this to be written for you and SO is not a code writing service. — freedomn-m, Sep 30 '19 at 16:36

score 2 · Accepted Answer · answered Sep 30 '19 at 16:41

First, your HTML is invalid because you have opening label tags instead of closing ones. Next, don't do event handing inline in HTML, separate it and do it in JavaScript.

For your issue, just loop over the labels after a div gets deleted and update its text with the index position of where it is within the collection of labels:

// 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>

If you also have to account for child `
` elements being dynamically added, registering your event like this might work better: `$("#Parent").on("click", "div", function() {...});`. Then you won't have to register for dynamically added elements. — Tom Faltesek, Sep 30 '19 at 16:45

How to assign child div position number to a label inside the child div

1 Answers1