使用按钮单击的可排序JS删除项

<div id="list-container">
  <ul id="item-list">
    <li>Item 1 <button class="delete-button">Delete</button></li>
    <li>Item 2 <button class="delete-button">Delete</button></li>
    <li>Item 3 <button class="delete-button">Delete</button></li>
  </ul>
</div>

var deleteButtons = document.getElementsByClassName("delete-button");

for (var i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener("click", function() {
    var listItem = this.parentNode;
    listItem.parentNode.removeChild(listItem);
  });
}

var itemList = Array.from(document.getElementById("item-list").children);

for (var i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener("click", function() {
    var listItem = this.parentNode;
    var index = itemList.indexOf(listItem);
    itemList.splice(index, 1);
    itemList.sort(); // 根据特定的排序规则进行排序
    renderList();
  });
}

function renderList() {
  var listContainer = document.getElementById("list-container");
  var newList = document.createElement("ul");
  
  for (var i = 0; i < itemList.length; i++) {
    newList.appendChild(itemList[i]);
  }
  
  listContainer.removeChild(document.getElementById("item-list"));
  newList.id = "item-list";
  listContainer.appendChild(newList);
}