En utilisant des wrappers et tout ce que je peux simplement créer un élément Item en l'utilisant, et ce wrapper a un numéro de ligne. Je souhaite réinitialiser tous les numéros de ligne des articles une fois que j'ai supprimé un élément Item. Ex- Si j'ai des numéros de ligne comme 1, 2, 3 et si je supprime la 2e ligne, les numéros de ligne doivent être réinitialisés et cela devrait ressembler à 1,2 (le numéro de 3e ligne est renommé avec 2e).

En utilisant ce code, je crée des éléments.

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);
}

En utilisant cela, je supprime les éléments.

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

    if ($(".itemmapContainer").html() == "") {
        $("#itemid").removeAttr("disabled");
    }
}
1
DinupaChamin 7 nov. 2019 à 14:30

1 réponse

Meilleure réponse

le code ci-dessous fonctionnera pour votre condition

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

Exécutez le code et vérifiez

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>
1
Good Samaritan 7 nov. 2019 à 11:52