Question

使用包装器和一切，我可以简单地使用它创建一个Item元素，并且该包装器具有行号。删除一个Item元素后，我想重设所有项目的行号。例-如果我的行号为1、2、3，并且删除第二行，则必须重新设置行号，它看起来应该像1,2（第三行号用2nd重命名）。

使用此代码，我正在创建元素。

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

以此删除元素。

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

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

Answer 1

以下代码将满足您的要求

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

运行代码并检查

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>

每次删除一个元素时如何重置ID？

1 个答案: