如何从待办事项列表中清除元素(使用用户添加的元素)

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

例如：

醒来
刷牙
吃早餐

我怎样才能创建一个函数来删除列表中的任何元素，并说，如果我删除元素 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>

实现目标的一种方法是调用 ol.getElementsByTagName('li') 来检索有序列表中的所有列表项。这些列表项将以数组形式返回。

请注意，数组从零开始编制索引。您的用户会看到一个从 1 开始编制索引的列表。如果提示用户键入项目编号，则必须从项目编号中减去 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的值在于函数的闭包。它引用列表项。当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>

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

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/

相关内容

最新更新

热门标签：