How to reset id's every time I delete one element?

Question

Using wrappers and everything I can simply create a Item element using it, and this wrapper have a row number. I want to reset the all the items row numbers once I delete one Item element. Ex- If I have row numbers as 1, 2, 3, and if I delete 2nd row, the row numbers have to reset and It should look like 1,2(3rd row number rename with 2nd).

Using this code I'm creating elements.

function appendItemforPurchaseOrder() {
    debugger

    var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber"));

    rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1;

    var addNewItemDetailHtml = "<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12 itemmapWrapper custom-paaddingnone'\
                               id='itemmapWrapper" + rowNumber + "' data-rowNumber='" + rowNumber + "' >";

    addNewItemDetailHtml += "<div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 custom-paaddingnone form-group'>\
                                    <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1 custom-paaddingnone text-center'>" + rowNumber + "\
                                    </div>\
                                    <div class='col-lg-11 col-md-11 col-sm-11 col-xs-11 custom-paaddingnone'>\
                                        <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12 custom-paaddingnone form-group'>\
                                            <div class='col-lg-3 col-md-3 col-sm-3 col-xs-3 custom-paaddingleft' onChange='getItemCode(" + rowNumber + ")'>\
                                                <select class='form-control' id = 'itemid"+ rowNumber + "' ></select>\
                                            </div >\
                                        </div>\
                                        <div class='col-lg-7 col-md-7 col-sm-7 col-xs-7 custom-paaddingnone'>\
                                            <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1 custom-paaddingnone text-center'>\
                                                <button type = 'button' class='btn btn-primary btn-sm' onclick = 'appendMember(" + rowNumber + ")' >\
                                                   <span class='glyphicon glyphicon-plus'  style='pointer-events: auto;'></span>\
                                                </button>\
                                            </div >\
                                        </div >\
                                    </div>\
                                </div >";


    addNewItemDetailHtml += "</div>";

    $(".itemmapContainer").attr("data-rownumber", rowNumber);
    $(".itemmapContainer").append(addNewItemDetailHtml);
}

Using this I delete the elements.

function removeItemDetail(buttonElement, rowNumber) {
    debugger
    $(buttonElement).parents(".itemmapWrapper").remove();

    if ($(".itemmapContainer").html() == "") {
        $("#itemid").removeAttr("disabled");
    }
}

Answer 1

the below code will work for your requirement

 $('.itemmapWrapper').each(function(i, obj) {
            $(obj).attr('id', i);
            $(obj).children("button").text("Del button "+ i)        
   });     

Run the code and check

 function removeItemDetail(buttonElement, rowNumber) { $(buttonElement).parents(".itemmapWrapper").remove(); $('.itemmapWrapper').each(function(i, obj) { $(obj).attr('id', i); $(obj).children("button").text("Del button "+ i) }); if ($(".itemmapContainer").html() == "") { $("#itemid").removeAttr("disabled"); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div id="1" class="itemmapWrapper"> <button onclick="removeItemDetail(this,1)">Del button 1</button> </div> <div id="2" class="itemmapWrapper"> <button onclick="removeItemDetail(this,2)">Del button 2</button> </div> <div id="3" class="itemmapWrapper"> <button onclick="removeItemDetail(this,3)">Del button 3</button> </div> <div id="4" class="itemmapWrapper"> <button onclick="removeItemDetail(this,4)">Del button 4</button> </div> </div>