jQuery删除增加了Ids的元素

Question

我试图在按下按钮时从页面中删除元素及其包装，但我需要按顺序重新编号其余的ID。

问题在于我需要它们具有增量Id（例如Parent [0]，Parent [1]），以便在提交表单时将它们绑定到ASP.net MVC模型。

以下是我正在测试的编码示例：

<div class="row" id="grandparent[0]">
    <div class="col-md-12" id="parent[0]">
        <div class="col-md-9">
            <input value="zero" disabled id="[0]" class="form-control">
        </div>

        <button class="btn btn-warning">[0]</button>
    </div>
</div>

<hr>

<div class="row" id="grandparent[1]">
    <div class="col-md-12" id="parent[1]">
        <div class="col-md-9">
            <input value="one" disabled id="[1]" class="form-control">
        </div>

        <button class="btn btn-warning">[1]</button>
    </div>
</div>

<hr>

<div class="row" id="grandparent[2]">
    <div class="col-md-12" id="parent[2]">
        <div class="col-md-9">
            <input value="two" disabled id="[2]" class="form-control">
        </div>

        <button class="btn btn-warning">[2]</button>
    </div>
</div>

到目前为止，我试图使用按钮中的值（作为一个简单的测试，稍后将使用更好的方法替换），然后找到祖父母包装器（即<div class="row" id="grandparent[1]">），然后存储html （）在变量中并用[0]替换[1]。然后我将删除前一个父项（例如<div class="col-md-12" id="parent[1]">..</div>）并将其替换为新的父项。

但是，上述方法不起作用，因为它只在第一行执行替换（即<div class="col-md-12" id="parent[0]">）。

我想知道这是解决这个问题的最佳途径，还是有人有更好的建议。任何想法将不胜感激。提前感谢您的帮助。

Answer 1

你想做的事情非常简单。你想要：

1. 单击删除按钮时删除包装器（删除按钮的.row祖先）。
2. 查找表单中剩余的所有行。
3. 遍历它们并重命名需要重命名其id或属性的所有元素。

Live Demo

var $form = $('#myForm');

$form.on('click', '.btn-warning', function (event) {
    var $item = $(event.currentTarget);
    var $wrapper = $item.closest('.row');

    $wrapper.hide('fast', function () {
        $wrapper.remove();

        // Find all the items you need to renumber
        var $rows = $form.find('.row');

        // Iterate through them
        $rows.each(function (i, row) {
            var $row = $(row);

            // Do whatever renaming you need to do
            $row.attr('id', 'grandparent[' + i + ']');
            $row.children().attr('id', 'parent[' + i + ']');
            $row.find('input')
                .attr('id', '[' + i + ']')
                .val(getNumberWord(i));
            $row.find('button').text('[' + i + ']');
        });

    });

    event.preventDefault();
});

// I added this part just to be silly, really
function getNumberWord(i) {
    var words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
    return words[i];
}