从列表Javascript动态删除项目

Question

我有以下代码片段(非自编写,通过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

Idea基本上给每个名称一个id,并在按钮点击时通过id删除它们.

更新了小提琴

这为每个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获取数据

首先要做到这一点因为它建立在上面的答案上.

小提琴

所以我们有了自己的名字,并能够将它们添加到列表中,但现在我们需要将数据作为数组.

添加此行以便于访问该名称

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元素中添加了一个按钮(remove)按钮.

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

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

所以另一种方法是不同的,这次我们不添加/读取DOM,但我们将所有内容存储在一个数组中.每次数组更改时,我们都会呈现列表以供显示.

小提琴

所以,我们有一个名称数组,我们将添加和删除.

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中删除所有内容:根据这个答案,这比简单地做得快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中看到更改.