jQuery安排索引输入名称[？]

Question

我想删除输入后安排的索引输入名称，例如：

删除输入row222[2]后，其他输入名称为：row000[0]＆amp; row111[1]＆amp; row333[2]
删除输入row333[3]后，其他输入名称为：row000[0]＆amp; row111[1]＆amp; row222[2]
删除输入row111[3]后，其他输入名称为：row000[0]＆amp; row222[1]＆amp; row333[2]
等...

我该怎么办？

DEMO

我的完整代码：

＆＃13;

＆＃13;

$(document).on('click', '.RemOve', function(e) {
    e.preventDefault();
    $(this).closest('.CloSe').remove();

    $('.CloSe').each(function(idx) {
        var Input = $($('.Change input'), this);
        Input.each(function(i) {
            var str = $(this).attr('name');
            var currentIdx = parseInt(str.match(/\d+/)[0], 10);
            $(this).attr('name', str.replace(currentIdx, idx));
        })
    });
    $('.CloSe').each(function(){
        $('.namein', this).empty().append($(this).find('input').prop('name'))
    })
})

＆＃13;

.RemOve{
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows[0]</b>
        <input type="text" name="rows000[0]"> // rows000[0]
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows[1]</b>
        <input type="text" name="rows111[1]"> // rows111[1]
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows[2]</b>
        <input type="text" name="rows222[2]"> // rows222[2]
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows[3]</b>
        <input type="text" name="rows333[3]"> // rows333[3]
    </span>
    <span class="RemOve">Remove</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已更新您的代码，请点击此处http://jsfiddle.net/chtvfkt2/1/

我还评论了你的一些代码。如果使用注释代码的具体原因，请取消注释并使用它。

---

<强>更新

我对你的问题感到有些困惑。所以我分开了答案。

如果要在删除其中一个元素后重命名其余元素，请在下面进行操作。

＆＃13;

＆＃13;

$(document).on('click', '.RemOve', function(e) {
    //I see no point in using preventDefault() here ?
    //e.preventDefault();
    $(this).closest('.CloSe').remove();
    
    $('.CloSe').each(function(idx, element) {
        
        //var Input = $($('.Change input'), this);
        
        //Improved :: better than using 'this'.
        var Input = $($('.Change input'), element); 
        Input.each(function(i, el) {
            
            //Improved :: No point using parseInt and str.replace ?
            //var str = $(this).attr('name');
            //var currentIdx = parseInt(str.match(/\d+/)[0], 10);
            //$(this).attr('name', str.replace(currentIdx, idx));            
            
            
            var numb = i < 99 ? "rows00" + i : "rows0" + i;
            if ( i > 100 ) {
                numb = "rows" + i;
            }            
            $(el).attr('name', numb);
        })
    });
        
    $('.CloSe').each(function(){
        $('.namein', this).empty().append($(this).find('input').prop('name'))
    });

    
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows000</b>
        <input type="text" name="rows000">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows001</b>
        <input type="text" name="rows001">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows002</b>
        <input type="text" name="rows002">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows003</b>
        <input type="text" name="rows003">
    </span>
    <span class="RemOve">Remove</span>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果您只想将其中一个关闭并且不希望发生任何变化，请选择此项。

＆＃13;

＆＃13;

$(document).on('click', '.RemOve', function(e) {
    $(this).closest('.CloSe').remove();     
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows000</b>
        <input type="text" name="rows000">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows001</b>
        <input type="text" name="rows001">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows002</b>
        <input type="text" name="rows002">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows003</b>
        <input type="text" name="rows003">
    </span>
    <span class="RemOve">Remove</span>
</div>

＆＃13;

＆＃13;

＆＃13;

---

最终更新

只需重新显示显示文本就是你想要的，这段代码就可以了。

＆＃13;

＆＃13;

$(document).on('click', '.RemOve', function(e) {
    $(this).closest('.CloSe').remove();
    
    $('.CloSe').each(function(idx, element) {        
        //Improved :: better than using 'this'.
        var Input = $($('.Change input'), element); 
        Input.each(function(i, el) {            
            var numb = i < 99 ? "rows00" + i : "rows0" + i;
            if ( i > 100 ) {
                numb = "rows" + i;
            }            
            $(el).prev().text(numb);
        })
    });    
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows000</b>
        <input type="text" name="rows000">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows001</b>
        <input type="text" name="rows001">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows002</b>
        <input type="text" name="rows002">
    </span>
    <span class="RemOve">Remove</span>
</div>
<div class="CloSe">
    <span class="Change">
        <b class="namein">rows003</b>
        <input type="text" name="rows003">
    </span>
    <span class="RemOve">Remove</span>
</div>

＆＃13;

＆＃13;

＆＃13;