javascript - jQuery 如何在删除列表中的 1 时自动调整数字列表？

Question

我想自动调整使用 .append() 创建的号码列表。例如，如果列表中添加了 4 个元素，编号分别为 2-4，如果我删除了第 3 个元素，则第 4 个元素将自动成为第 3 个元素，如果我添加一个新元素，它将是最后一个列表。下面是我的代码。

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i = 0; i < cnt; i++) {
    c++;
    $('#inputs').append("<div id='inputs' name='" + c + "'>" + c + ".)<button id='remove' name='" + c + "'>X</button></div>");
  }
});
$(document).on('click', '#inputs #remove', function() {
  var nm = $(this).attr('name');
  $('div[name="' + nm + '"]').remove();
  c--;
});

#show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>

这是 jsfiddle的代码。

Answer 1

这是你的答案

Fiddle Here

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i = 0; i < cnt; i++) {
    c++;
    $('#inputs').append("<div class='inputs' name='" + c + "'><span class='number'>" +c + "</span>.)<button class='remove' name='" + c + "'>X</button></div>");
  }
});
$(document).on('click', '#inputs .remove', function() {
  var nm = $(this).attr('name');
  $('div[name="' + nm + '"]').remove();
  c--;
resetCount();
});
function resetCount(){
    $('#inputs div.inputs').each(function(i){
        $('.number', $(this)).text(i+2);
        $('input', $(this)).attr('name', i+2);
    });
}

#remain,
#total {
  background-color: #333;
  width: 60px;
  height: 20px;
  color: #fff;
  padding: 0 10px;
}
input:focus {
  background-color: #000;
  color: #fff;
}
input {
  background-color: #ccc;
}
#show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>