Javascript 如何从待办事项列表中清除元素（使用用户添加的元素）？

我有一个待办事项列表页面，里面有一个div矩形和一个有序列表。有一个按钮可以触发“添加列表”功能。但是如何删除用户添加的特定元素

例如：

醒醒

刷牙

吃早餐

我如何创建一个函数来删除列表中的任何元素，并说，如果我删除了元素2，将3的数字替换为2？javascript代码如下所示：

<script type='text/javascript'>
        function addToList () {
            var newToDo = prompt("Please enter something to do.");
            var ol = document.getElementById('demo');
            var li = document.createElement('li');
            li.appendChild(document.createTextNode(newToDo));
            ol.appendChild(li);
        }
        function clearList () {
            var ol = document.getElementById('demo');
            ol.innerHTML = '';
            var li = document.createElement('li');
            li.appendChild(document.createTextNode("First Element"));
            ol.appendChild(li);
        }
    </script>

函数addToList（）{
var newToDo=提示（“请输入要做的事情”）；
var ol=document.getElementById（'demo'）；
var li=document.createElement（'li'）；
li.appendChild（document.createTextNode（newToDo））；
l.儿童（李）；
}
函数clearList（）{
var ol=document.getElementById（'demo'）；
ol.innerHTML=''；
var li=document.createElement（'li'）；
li.appendChild（document.createTextNode（“第一个元素”）；
l.儿童（李）；
}

html如下所示：

<div style="width:300px;height:500px;border:1px solid #000;">
    <ol id="demo">
        <li>Enter things to do</li>
    </ol>
    <button onclick="addToList()">Add To List</button>
    <button onclick="clearList()">Clear List</button>
    </div>

输入要做的事情
添加到列表中
清除列表

实现目标的一种方法是调用

ol.getElementsByTagName（'li'）

检索有序列表中的所有列表项。这些列表项将以数组形式返回

请注意，数组的索引从零开始。您的用户看到一个从一开始索引的列表。如果提示用户键入项目编号，则必须从项目编号中减去1才能获得数组中项目的索引

最后，您可以对有序列表调用

removeChild（）

，将列表项作为参数传递。该项目将从列表中删除，其余项目将由浏览器自动重新排序

以下是执行上述操作的函数：

function removeFromList () {
    var input = prompt('Enter the number of the item to be removed.');
    var ol = document.getElementById('demo'),
        items = ol.getElementsByTagName('li'),
        removeIndex = parseInt(input, 10) - 1;
    if (removeIndex >= 0 && removeIndex < items.length) {
        ol.removeChild(items[removeIndex]);
    } else {
        alert('"'+input+'" is not a valid item number.');
    }
}

另一种方法，也是我从用户界面的角度更喜欢的方法，是将删除小部件附加到列表项，而不是提示用户输入项目编号。有很多方法可以实现这样的小部件。您可以在创建项目时向列表中添加复选框或按钮，也可以在用户将鼠标移到项目上时根据需要生成按钮

下面是一种特定方法的实现。项目添加功能为每个列表项目生成一个不可见的小部件。小部件是一个

span

元素，当用户将鼠标移到列表项上时，它会显示在左侧。如果用户单击小部件，列表项将消失

请注意，在创建列表项时，使用了一个匿名函数

function（）{ol.removeChild（li）}

，以捕获

li

的值。

li

的值在函数的后面。它指的是列表项。当触发

onclick

时，函数将被评估，列表项将从其父项

ol

中删除，该父项也由闭包保留

您可以在JSFIDLE上尝试以下代码：

.deleteBox{
颜色：#9c1f1f；
背景：#ffc；
字体系列：无衬线；
字体大小：粗体；
填充物：2px 5px；
左边距：-25px；
右边距：5px；
可见性：隐藏；
}   
李：悬停{
游标：默认值；
背景：#eee；
}   
李：悬停。删除框{
能见度：可见；
光标：指针；
}   
函数addToList（）{
var item=prompt（“请输入要做的事情”）；
如果（项！==null）{
addListItem（项目）；
}
}
函数addListItem（项）{
var ol=document.getElementById（'demo'），
li=document.createElement（'li'），
deleteBox=document.createElement（'span'）；
deleteBox.className='deleteBox'；
deleteBox.appendChild（document.createTextNode（'X'））；
deleteBox.onclick=function（）{ol.removeChild（li）}；
li.appendChild（deleteBox）；
li.appendChild（document.createTextNode（item））；
l.儿童（李）；
}
函数clearList（）{
var ol=document.getElementById（'demo'）；
ol.innerHTML=''；
}
函数main（）{
addListItem（'检查邮箱'）；
addListItem（“购买牛奶”）；
addListItem（“测试应用程序”）；
}
window.onload=main；
添加到列表中
清除列表

在创建列表项时添加一个按钮将其删除：

function addToList () {
    var newToDo = prompt("Please enter something to do.");
    if(!newToDo) return;
    var ol = document.getElementById('demo');
    var li = document.createElement('li');
    li.innerHTML= "<button onclick=parentNode.remove()>X</button> "+newToDo;
    ol.appendChild(li);
}

function clearList () {
    var ol = document.getElementById('demo');
    ol.innerHTML = '';
    var li = document.createElement('li');
    li.appendChild(document.createTextNode("First Element"));
    ol.appendChild(li);
}

函数addToList（）{
var newToDo=提示（“请输入要做的事情”）；
如果（！newToDo）返回；
var ol=document.getElementById（'demo'）；
var li=document.createElement（'li'）；
li.innerHTML=“X”+newToDo；
l.儿童（李）；
}
函数clearList（）{
var ol=document.getElementById（'demo'）；
ol.innerHTML=''；
var li=document.createElement（'li'）；
li.appendChild（document.createTextNode（“第一个元素”）；
l.儿童（李）；
}

---

强制性小提琴演示：

问题是，当我在提示框中单击cancel时，它创建的元素为空。另外，如果它是空的，元素只有一个X。如何修复它？为了处理用户单击取消的情况，我修改了

addToList（）

，测试

prompt（）

是否返回

null

。对于用户输入一个空字符串的情况，如何处理由您决定。我认为如果用户想添加一个空白项也可以。如果您认为不合适，可以根据您的需求验证输入字符串。

<html>
<head>
<style type="text/css">
.deleteBox {
    color: #9c1f1f;
    background: #ffc;
    font-family: sans-serif;
    font-weight: bold;
    padding: 2px 5px;
    margin-left: -25px;
    margin-right: 5px;
    visibility: hidden;
}   
li:hover {
    cursor: default;
    background: #eee;
}   
li:hover .deleteBox {
    visibility: visible;
    cursor: pointer;
}   
</style>
<script>
function addToList () {
    var item = prompt("Please enter something to do.");
    if (item !== null) {
        addListItem(item);
    }
}
function addListItem(item) {
    var ol = document.getElementById('demo'),
        li = document.createElement('li'),
        deleteBox = document.createElement('span');
    deleteBox.className = 'deleteBox';
    deleteBox.appendChild(document.createTextNode('X'));
    deleteBox.onclick = function () { ol.removeChild(li) };
    li.appendChild(deleteBox);
    li.appendChild(document.createTextNode(item));
    ol.appendChild(li);
}
function clearList () {
    var ol = document.getElementById('demo');
    ol.innerHTML = '';
}
function main() {
    addListItem('Check the mailbox.');
    addListItem('Buy milk.');
    addListItem('Test the app.');
}
window.onload = main;
</script>
</head>
<body>
<div style="width:300px;height:500px;border:1px solid #000;">
    <ol id="demo">
    </ol>
    <button onclick="addToList()">Add to list</button>
    <button onclick="clearList()">Clear list</button>
</div>
</body>
</html>

function addToList () {
    var newToDo = prompt("Please enter something to do.");
    if(!newToDo) return;
    var ol = document.getElementById('demo');
    var li = document.createElement('li');
    li.innerHTML= "<button onclick=parentNode.remove()>X</button> "+newToDo;
    ol.appendChild(li);
}

function clearList () {
    var ol = document.getElementById('demo');
    ol.innerHTML = '';
    var li = document.createElement('li');
    li.appendChild(document.createTextNode("First Element"));
    ol.appendChild(li);
}