javascript - 从列表 Javascript 中动态删除项目

Question

我有以下代码片段(不是自己写的，来自Add a list item through javascript)

此处相关脚本的演示:http://jsfiddle.net/Gmyag/

HTML 部分:

First name:
<input type="text" id="firstname">
<br>
<p>Your first name is: <b id='boldStuff2'></b> 
</p>
<p>Other people's names:</p>
<ol id="demo"></ol>
<input type='button' onclick='changeText2()' value='Submit' />

JS部分:

var list = document.getElementById('demo');

function changeText2() {
    var firstname = document.getElementById('firstname').value;
    document.getElementById('boldStuff2').innerHTML = firstname;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstname));
    list.appendChild(entry);
}

并且需要知道如何添加出现在每个条目旁边的动态按钮，例如，单击后将从数组和列表中删除该条目的“X”标记。

非常感谢任何帮助。

Answer 1

想法基本上是给每个名字一个 id 并在单击按钮时通过 id 删除它们。

Updated fiddle

这给每个 li 一个 id 并添加一个带有 removeName('itemid') 的按钮在它的 onClick 属性上。

entry.setAttribute('id','item'+lastid);
var removeButton = document.createElement('button');
removeButton.appendChild(document.createTextNode("remove"));
removeButton.setAttribute('onClick','removeName("'+'item'+lastid+'")');
entry.appendChild(removeButton);

removeName 函数只是查找项目并将其从列表中删除。

function removeName(itemid){
    var item = document.getElementById(itemid);
    list.removeChild(item);
}

编辑:至于为什么zozo的回答会出问题:它允许您添加具有相同 ID 的多个项目。我在对他们的回答的评论中进行了解释。

编辑

因此对于您的 2 个请求:

1) 从DOM获取数据

首先进行此操作，因为它建立在上述答案的基础上。

FIDDLE

所以我们有了我们的名字，并且能够将它们添加到列表中或从列表中删除它们，但现在我们需要数据作为数组。

添加这一行是为了更容易访问名称

entry.setAttribute('data-name',firstname);

并像这样从列表中获取所有名称:

function getNames(){
    var names = [];
    for(var i=0;i<list.children.length;i++){
        names.push(list.children[i].getAttribute("data-name"));//get previously set attribute and add to array
    }
    return names;
}

我们可以简单地获取我们添加的属性来获取名称。如果我们不添加该属性，我们将需要进入 <li> 的内部节点。并获取文本节点以获取名称。我们不能简单地获取 li 的 innerText 或 innerHtml，因为我们在 li 元素内添加了一个按钮(删除)按钮。

我在表单末尾添加了另一个按钮来测试 getNames 函数。

2)从一开始就在js中存储数据

所以另一种方法是不同的，这次我们不添加到 DOM 或从 DOM 读取，而是将所有内容存储在一个数组中，然后。每次数组更改时，我们都会渲染列表以供显示。

FIDDLE

因此，我们有一个名称数组，我们将向其添加和从中删除。

var names = []; // [] is same as new Array();

我们只需将名称添加到列表中并重新渲染列表

function changeText2() {
    var firstname = document.getElementById('firstname').value;
    document.getElementById('boldStuff2').innerHTML = firstname;
    names.push(firstname);//simply add new name to array;
    //array changed re-render list
    renderList();
}

当我们需要删除时，我们只需将其从数组中删除并重新呈现列表即可:

function removeName(nameindex){
    names.splice(nameindex,1);
    //array changed re-render list
    renderList();
}

正如您可能猜想的那样，一切都发生在 renderList 中。功能:

function renderList(){

我们首先从 DOM 中删除所有内容:根据this answer这比简单地做 list.innerHTML = "" 更快

//clean the list
while (list.firstChild) {
    list.removeChild(list.firstChild);
}

然后我们再次创建每个项目

for(var i=0;i<names.length;i++){
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(names[i]));
    var removeButton = document.createElement('button');
    removeButton.appendChild(document.createTextNode("remove"));
    removeButton.setAttribute('onClick','removeName('+i+')');
    entry.appendChild(removeButton);
    list.appendChild(entry);
}

请注意，removeName 函数现在采用数组索引而不是 id。你需要调用renderList每次数组更改时，更改都在 dom 中可见。