Question

我有一个待办事项列表页面，里面有一个div矩形和一个有序列表。有一个触发按钮和＆＃34; addToList＆＃34;点击功能。但是，如何删除用户添加的特定元素？

例如：

醒来
刷牙
吃早餐

如何创建一个删除列表中任何元素的函数，并说，如果我删除元素2，用2替换3的数字？ 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>

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>

Answer 1

实现目标的一种方法是调用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.');
    }
}

这是一个按钮，您可以将其添加到现有HTML中以致电removeFromList：

<button onclick="removeFromList()">Remove from list</button>

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

以下是一种特定方法的实现。项目添加功能为每个列表项生成不可见的小部件。窗口小部件是span元素，当用户将鼠标悬停在列表项上时，该元素显示在左侧。如果用户单击窗口小部件，则列表项将消失。

请注意使用匿名函数function () { ol.removeChild(li) }来捕获创建列表项时li的值。 li的值位于函数的closure中。它指的是列表项。当onclick触发时，将对该函数进行求值，并从其父ol中删除列表项，该句柄也由闭包保留。

您可以在JSFiddle：http://jsfiddle.net/1unppned/

上试用此代码

<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>

Answer 2

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

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);
}

强制性小提琴演示：http://jsfiddle.net/0o5tczn9/

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

2 个答案: