Question

我正在做一个待办事项清单，我需要知道如何删除第一个有序列表中的项目。我该怎么做呢？这是我的一些代码...

   <ul id="todo-list">

   <li>Walk dog</li>

   <li>Buy eggs</li>

   <li>Go for a Walk</li>

  </ul>

<button onclick="removeTask()">Remove first task</button>

function removeTask(){

//what do i put here to remove first item
//from list (walk dog)?

}

我需要在单击按钮时删除第一项的列表。

请帮助谢谢！

Answer 1

尝试一下：

  const list = document.getElementById('todo-list');   

function removeTask(){

   list.querySelector('li').remove()
}

  <ul id="todo-list">

   <li>Walk dog</li>

   <li>Buy eggs</li>

   <li>Go for a Walk</li>

  </ul>

<button onclick="removeTask()">Remove first task</button>

Answer 2

使用querySelector获取第一个孩子，然后使用removeChild删除它：

const list = document.getElementById("todo-list");

function removeTask() {
  list.removeChild(list.querySelector("li"));
}

<ul id="todo-list">

  <li>Walk dog</li>

  <li>Buy eggs</li>

  <li>Go for a Walk</li>

</ul>

<button onclick="removeTask()">Remove first task</button>

如何从列表javascript中删除第一项？

2 个答案: