Question

我有以下代码段（非自编，从Add a list item through javascript获得）

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

并且需要知道如何添加每个条目旁边显示的动态按钮，例如，＆＃34; X＆＃34;标记一旦点击将从数组和列表中删除该条目。

非常感谢任何和所有帮助。

Answer 1

理念基本上是为每个名称提供一个id，并在按钮点击时通过id删除它们。

Updated fiddle

这会为每个li提供一个id，并在其onClick属性上添加一个带有removeName('itemid')的按钮。

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，但我们将所有内容存储在一个数组中。每次数组更改时，我们都会渲染列表以供显示。

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中删除所有内容：根据{{3}}，这比简单地执行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中看到更改。

Answer 2

在var = document.createElement（'li'）;

之后添加

  entry.setAttribute("id", "node" + list.children.length);

这将为您新创建的lis ID。

在你的删除按钮上添加onclick =“removeElement（ - 这里是你要删除的节点的id - ）”

最后添加

  function removeElement(id) {
       var element = document.getElementById(id);
       element.parentNode.removeChild(element);
  }

从列表Javascript动态删除项目

2 个答案:

1）从DOM获取数据

2）从开头