Question

我正在尝试从列表中删除最后一项。我完成的代码仅删除最后一项，而其余部分将无法完成。

我已经尝试过，但是不知道出了什么问题

function addList(entry) {
  var input = document.getElementById('input').value;
  var listNode = document.getElementById('list');
  var liNode = document.createElement("li");
  textNode = document.createTextNode(input);

  liNode.appendChild(textNode);
  listNode.appendChild(liNode);
}

function removeItem() {
  textNode.remove(input);
};

<ul id="list"></ul>

<input type="text" id="input">
<button onclick="addList()">Add</button>
<button onclick="removeItem()">Remove item</button>

Answer 1

当您询问“列表中的最后一项”时，请获取列表并搜索最后一项并将其删除...

function removeItem() {
    let list = document.getElementById("list");
    list.removeChild(list.lastChild)
};

Answer 2

您可以通过多种方式从其父级中删除元素。

function addItemFirst() {
  let listNode = document.getElementById('list');
  let currentText = document.getElementById('input').value.trim();
  let liNode = document.createElement('li');
  liNode.textContent = currentText;
  listNode.insertBefore(liNode, listNode.firstElementChild);
}

function addItemLast() {
  let listNode = document.getElementById('list');
  let currentText = document.getElementById('input').value.trim();
  let liNode = document.createElement('li');
  liNode.textContent = currentText;
  listNode.appendChild(liNode);
}

function removeOneBy() {
  let currentText = document.getElementById('input').value.trim();
  let listNode = document.getElementById('list');
  let children = listNode.querySelectorAll('li');
  for (var i = 0; i < children.length; i++) {
    if (children[i] && children[i].textContent === currentText) {
      listNode.removeChild(children[i]);
      break;
    }
  }
};

function removeAllBy() {
  let currentText = document.getElementById('input').value.trim();
  let listNode = document.getElementById('list');
  let children = listNode.querySelectorAll('li');
  for (var i = children.length - 1; i >= 0; i--) {
    if (children[i] && children[i].textContent === currentText) {
      listNode.removeChild(children[i]);
    }
  }
};

function removeFirstItem() {
  let listNode = document.getElementById('list');
  var firstChild = listNode.firstElementChild;  
  if (firstChild) {
    listNode.removeChild(firstChild); 
  } 
};

function removeLastItem() {
  let listNode = document.getElementById('list');
  var lastChild = listNode.lastElementChild;  
  if (lastChild) {
    listNode.removeChild(lastChild); 
  } 
};

function removeAll() {
  let listNode = document.getElementById('list');
  var child = listNode.lastElementChild;  
  while (child) { 
    listNode.removeChild(child); 
    child = listNode.lastElementChild; 
  } 
};

#list {
  border: thin solid black;
}

<input type="text" id="input">
<button onclick="addItemFirst()">Add First</button>
<button onclick="addItemLast()">Add Last</button>
<br />
<button onclick="removeOneBy()">Remove One (current text)</button>
<button onclick="removeAllBy()">Remove All (current text)</button>
<br />
<button onclick="removeFirstItem()">Remove First</button>
<button onclick="removeLastItem()">Remove Last</button>
<button onclick="removeAll()">Remove All</button>
<ul id="list"></ul>

从列表中删除最后一项

2 个答案: