Question

如果标题不正确，请原谅我，但我无法解释自己......

我有一个动态表单，用户可以使用jquery添加额外的字段。（附加）每个字段都有一个id：1,2,3,4 ..对于每个字段，都有一个按钮，ID号相同。用户可以通过单击从DOM中删除字段。使用删除功能，我也删除了相关的按钮。

<div class="fields">
    <input type="text" id="field-id-1">
    <input type="text" id="field-id-2">
    <input type="text" id="field-id-2">
</div>

<div class="buttons">
    <input type="submit" id="button-id-1">
    <input type="submit" id="button-id-2">
    <input type="submit" id="button-id-3">
</div>

在每次删除操作后，我想重新排序按钮和字段，例如我有字段按钮，具有以下ID：＃1，＃2，＃3。如果用户删除＃1，我想更改＃2 - ＆gt; ＃1和＃3 - ＆gt; ＃2。

问题看起来很简单，但我有点困惑。我希望你能理解我的问题。

Answer 1

我不是在辩论这个问题的用处，而是在撰写时回答它（包括评论）：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/srB63/2/

// Test: For now click on the input to delete it
$(document).on('click','[id^=field-id]', function(){
    var $this = $(this);
    $this.remove();
    // Remove the matching button
    $('[id^=button-id]').eq($this.index()).remove();
    // Renumber the remaining inputs sequentially
    $('[id^=field-id]').each(function(idx){
        $(this).attr('id', 'field-id-' + ++idx);
    });
    // Renumber the remaining buttons sequentially
    $('[id^=button-id]').each(function(idx){
        $(this).attr('id', 'button-id-' + ++idx);
    });
});

[id^=匹配属性字符串值的开头

使用jQuery重新排序字段

1 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/srB63/2/