jQuery - 当html元素被删除时，格式化数字顺序

Question

我目前正在尝试获取基本功能，但功能正常，我说有5行，每个都有自己的编号。

所以我有5行....... 5,4,3,2,1 < ---如果我删除说3它应该看起来像4,3,2,1，所以我很有效反映我现在只有4现在，而不是5 .....如果我删除另一个值，然后去3,2,1等等。

我已经有点接近，但无法完成它的工作。

这里是JSfiddle

jQuery(function($) { 
 
    var countercontact = 0; 
 
    var counternum = 0; 
 
    $("#addcontact").on('click', function() { 
 
    countercontact++; 
 
    $("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">\<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>'); 
 
    if (countercontact === 1) { 
 
     $(".deletecontact").addClass('disabled'); 
 
    } else { 
 
     $(".deletecontact").removeClass('disabled'); 
 
    } 
 
    }); 
 

 
    $("#contact_num").on("click", ".deletecontact", function() { 
 
    if (countercontact <= 1) { 
 
     $(".deletecontact").addClass('disabled'); 
 
    } else { 
 
     $(".deletecontact").removeClass('disabled'); 
 
     $(this).closest('.row').remove(); 
 
     countercontact--; 
 
     $(".contactspan").each(function(index) { 
 
     var ordernum = $(this).text(); 
 
     console.log(ordernum); 
 
     if (ordernum !== 1) { 
 
      $(this).text(parseInt($(this).text()) - 1); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

.container { 
 
    width: 75%; 
 
} 
 
.row { 
 
    margin-bottom: 12px; 
 
    font-size: 13px; 
 
} 
 
.panel { 
 
    border: none; 
 
    box-shadow: none; 
 
} 
 
.panel-heading { 
 
    background-color: #D9DBDE; 
 
    padding: 20px; 
 
    margin-bottom: 10px; 
 
    border-radius: 0; 
 
} 
 
.panel-heading.head { 
 
    padding: 20px 0; 
 
    background-color: #E1F2F9; 
 
} 
 
.panel-body { 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-body row"> 
 
    <div class="form-group" id="contact_num"> 
 
     <div class="row"> 
 
     <div class="form-group col-md-1"> 
 
      <label for="pass"></label> 
 
     </div> 
 
     <div class="form-group col-md-3"> 
 
      <label for="pass">Contact No(s)</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="delay">Delay</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="confirm">Confirm</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="enable">Enable</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="delete"></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button> 
 
    </div> 
 
</div>

Answer 1

你可以写数字校正功能，每当需要像移除项目后运行。

function correctIndex(){ 
    $('#contact_num .row').each(function(){ 
      $(this).find('.contactspan').html($(this).index()+1); 
    }); 
} 

，或者你只是改变你的这部分代码：

$(".contactspan").each(function(index) { 
     var ordernum = $(this).text(); 
     console.log(ordernum); 
     if (ordernum !== 1) { 
      $(this).text(parseInt($(this).text()) - 1); 
     } 
}); 

到：

$(".contactspan").each(function(){ 
     $(this).html($(this).closest('.row').index() + '.') 
}); 

Here is updated fiddle

Answer 2

下导致出现该问题：

var ordernum = $(this).text(); 
console.log(ordernum); 
if (ordernum !== 1) { 
    $(this).text(parseInt($(this).text()) - 1); 
} 

ordernum在这种情况下1.所以你必须把它转换成int就像你在if子句中做的一样。

var ordernum = parseInt($(this).text()); 
console.log(ordernum); 
if (ordernum !== 1) { 
    $(this).text(ordernum - 1); 
} 

见https://jsfiddle.net/YvCil/ajgm9rhw/1/

Answer 3

请检查下面的代码片段。 我在数字重新分配方面做了如下改动。

var ordernum = 1; 
    $(".contactspan").each(function(index) { 
    $(this).text(ordernum); 
    ordernum++; 
    }); 

先将订单号分配给1，然后逐渐增加更多行。

jQuery(function($) { 
 
    var countercontact = 0; 
 
    var counternum = 0; 
 
    $("#addcontact").on('click', function() { 
 
    countercontact++; 
 
    $("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">\<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>'); 
 
    if (countercontact === 1) { 
 
     $(".deletecontact").addClass('disabled'); 
 
    } else { 
 
     $(".deletecontact").removeClass('disabled'); 
 
    } 
 
    }); 
 

 
    $("#contact_num").on("click", ".deletecontact", function() { 
 
    if (countercontact <= 1) { 
 
     $(".deletecontact").addClass('disabled'); 
 
    } else { 
 
     $(".deletecontact").removeClass('disabled'); 
 
     $(this).closest('.row').remove(); 
 
     countercontact--; 
 
     var ordernum = 1; 
 
     $(".contactspan").each(function(index) { 
 
     $(this).text(ordernum); 
 
     ordernum++; 
 
     }); 
 
    } 
 
    }); 
 
});

.container { 
 
    width: 75%; 
 
} 
 
.row { 
 
    margin-bottom: 12px; 
 
    font-size: 13px; 
 
} 
 
.panel { 
 
    border: none; 
 
    box-shadow: none; 
 
} 
 
.panel-heading { 
 
    background-color: #D9DBDE; 
 
    padding: 20px; 
 
    margin-bottom: 10px; 
 
    border-radius: 0; 
 
} 
 
.panel-heading.head { 
 
    padding: 20px 0; 
 
    background-color: #E1F2F9; 
 
} 
 
.panel-body { 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-body row"> 
 
    <div class="form-group" id="contact_num"> 
 
     <div class="row"> 
 
     <div class="form-group col-md-1"> 
 
      <label for="pass"></label> 
 
     </div> 
 
     <div class="form-group col-md-3"> 
 
      <label for="pass">Contact No(s)</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="delay">Delay</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="confirm">Confirm</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="enable">Enable</label> 
 
     </div> 
 
     <div class="form-group col-md-2"> 
 
      <label for="delete"></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button> 
 
    </div> 
 
</div>