Javascript 删除任何元素，重新分配计数值

很抱歉这个神秘的标题，很难描述

单击按钮时，我使用以下脚本将一行添加到表单中：

  $(document).ready(function() {
      $('#btnAdd').click(function() {
        var num     = $('.clonedInput').length;
        var newNum  = new Number(num + 1);

        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
        $('#input' + num).after(newElem);
        $('#btnDel').attr('disabled','');

        if (newNum == 5)
            $('#btnAdd').attr('disabled','disabled');
      });

      $('#btnDel').click(function() {
        var num = $('.clonedInput').length;

        $('#input' + num).remove();
        $('#btnAdd').attr('disabled','');

        if (num-1 == 1)
            $('#btnDel').attr('disabled','disabled');
      });

      $('#btnDel').attr('disabled','disabled');
  });

这样做非常好，但是用户不太友好，只能删除最后添加的行。如果我想删除前面添加的一行，我将不得不删除从那时起我所做的一切

---

如何删除任何行，同时将计数值重新分配给其他行，使计数仍然是连续的（即第1行、第2行、第3行等，而不是第1行、第5行、第8行）？

我刚才不得不做类似的事情

基本上，我得到了被删除行的编号，即Row3，然后循环遍历其余行，更新它们的值。所以第4行变成了第3行等等

我用过这样的东西

    var last_val = //get the last value of the rows so you know when to stop

    //knock off the Row part of the id and parses as an integer
    var pos = parseFloat(row_id.slice(3))

    var next_val = position+1;
    var prev_val = position;

    while(next_val<=last_val){
        next_selector = "#Row"+next_val;
        prev_id = "Row"+prev_val;
        $(next_selector).attr("id",prev_id);
        next_val++;
        prev_val++;
    }

var last\u val=//获取行的最后一个值，以便知道何时停止
//去掉id的行部分并将其解析为整数
var pos=parseFloat（行id.切片（3））
var next_val=位置+1；
var prev_val=位置；
while（next_val我建议您不要显式地为元素设置id。相反，您可以使用jQuery强大的选择器来获取元素的位置

这是一个基于常见html结构的示例。发布您自己的html以提供更多详细信息

  $('.btnDel').click(function() {
    var num = $(this).parent().prevAll().size();

    // this points to delete link.
    // The previous element is the content element
    $(this).prev().remove();

    $('#btnAdd').attr('disabled','');

    if (num-1 == 1)
            $(this).attr('disabled','disabled');
  });

<div class='elem'>
  <span class='content'>....</span>
  <a class='btnDel' href='#'>Delete</a>
</div>

$（'.btnDel'）。单击（函数（）{
var num=$（this.parent（）.prevAll（）.size（）；
//这指向删除链接。
//前一个元素是content元素
$（this.prev（）.remove（）；
$（'btnAdd'）.attr（'disabled'，''）；
如果（num-1==1）
$（this.attr（'disabled'，'disabled'）；
});
....
为什么还要在行中添加ID？记住，jQuery的83%是“Query”-使用选择器来获取所需的元素。
我发布了一个（在IE中，由于浮动，它看起来不太好，但我只想将此作为一个示例发布以提供帮助）.我不知道您如何处理收集表单数据的问题，因此我将克隆的输入ID重新编号

CSS

HTML


名称：

标题：

公司：

地点：

其他信息：

剧本

$(document).ready(function(){
 $('#btnAdd').click(function(){
    // inputs reversed because of the float right
  var newInput = '<div class="clonedInput">Additional Field <span></span>: ' +
   '<input type="button" class="btnDel" title="Delete this field" value="X"><input type="text" /></div>';
  $(newInput).appendTo('#addFields');
  // disable add button if there are 5 additional fields
  if ($('.clonedInput').length == 5) {
   $('#btnAdd').attr('disabled','disabled');
  }
  renumber();
 })
 // Delete input field
 $('.btnDel').live('click',function(){
  $('#btnAdd').attr('disabled','');
  $(this).parent().remove();
  renumber();
 })
})
// This function adds the additional field number and ID for each clonedInput field
function renumber(){
 $('.clonedInput').each(function(i){
  $(this).find('span').html('#' + (i+1));
  // the code below will change the ID of the input, in case you collect your data based on the ID.
  $(this).find('input[type=text]').attr('id', 'input' + (i+1));
 })
}

$（文档）.ready（函数（）{
$（'#btnAdd'）。单击（函数（）{
//由于右浮动，输入反转
var newInput='附加字段：'+
'';
$（newInput）.appendTo（“#addFields”）；
//如果有5个附加字段，则禁用“添加”按钮
如果（$（'.clonedInput'）。长度==5）{
$（'btnAdd'）.attr（'disabled'，'disabled'）；
}
重新编号（）；
})
//删除输入字段
$（'.btnDel'）.live（'click'，function（）{
$（'btnAdd'）.attr（'disabled'，''）；
$（this.parent（）.remove（）；
重新编号（）；
})
})
//此函数为每个clonedInput字段添加额外的字段号和ID
函数重新编号（）{
$（'.clonedInput'）。每个（函数（i）{
$（this.find（'span'）.html（'#'+（i+1））；
//下面的代码将更改输入的ID，以防您根据ID收集数据。
$（this.find（'input[type=text]'））.attr（'id'，'input'+（i+1））；
})
}
我不知道如何告诉它在没有显式id的情况下删除哪个元素。我现在有：var num=$（'.clonedInput'）.prevAll（）.size（）；$（'#input'）.remove（）；没有输入num，它怎么知道删除什么？我已经发布了一个示例。您可以使用$（这个）和jQuery选择器，以任意方式操作DOM。不需要为每个元素指定特定的id。
<form>
<div class="main">
 Name: <input type="text" /><br>
 Title: <input type="text" /><br>
 Company: <input type="text" /><br>
 Location: <input type="text" /><br>
</div>
Additional information: <input id="btnAdd" type="button" value="Add More"/>
<div id="addFields"></div>
</form>

$(document).ready(function(){
 $('#btnAdd').click(function(){
    // inputs reversed because of the float right
  var newInput = '<div class="clonedInput">Additional Field <span></span>: ' +
   '<input type="button" class="btnDel" title="Delete this field" value="X"><input type="text" /></div>';
  $(newInput).appendTo('#addFields');
  // disable add button if there are 5 additional fields
  if ($('.clonedInput').length == 5) {
   $('#btnAdd').attr('disabled','disabled');
  }
  renumber();
 })
 // Delete input field
 $('.btnDel').live('click',function(){
  $('#btnAdd').attr('disabled','');
  $(this).parent().remove();
  renumber();
 })
})
// This function adds the additional field number and ID for each clonedInput field
function renumber(){
 $('.clonedInput').each(function(i){
  $(this).find('span').html('#' + (i+1));
  // the code below will change the ID of the input, in case you collect your data based on the ID.
  $(this).find('input[type=text]').attr('id', 'input' + (i+1));
 })
}