创建一个列表 (<li>)，然后删除元素

【问题标题】：Create a list (<li>) and then remove the elements创建一个列表 (<li>)，然后删除元素
【发布时间】：2020-04-30 19:44:17
【问题描述】：

我必须根据用户的输入创建一个列表，然后选择删除元素（如果是这种情况），我试过了。

我的想法是创建列表，并在底部有这个“删除按钮”，一旦点击它，它应该为列表中的每个元素添加一个“删除”选项，但相反，我最终替换了所有元素有这个删除按钮的列表，有什么提示吗？

    
        function addmember(){

            var z = getInputValue();
            var ul= document.getElementById("crew1");
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(z));
            ul.appendChild(li);

        }
        function remove (){
            var r = document.getElementById("crew1");
            var z = r.getElementsByTagName("li");

            for(i = 0; i<z.length; i++){
                z[i].innerHTML ="<button type=\"button\" \">Remove a member</button>"
            }
        }

        function getInputValue(){
            // Selecting the input element and get its value 
            var inputVal = document.getElementById("myInput").value;

            // Displaying the value
            return inputVal;
        }

<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
    <input type="text" placeholder="Type something..." id="myInput">
    <button type="button" onclick="addmember();">Add Member</button>

    <p>Crew:</p>
    <ul class = "prova" id="crew1">

    </ul>
    <button type="button" onclick="remove();">Remove</button>
</body>
</html>

【问题讨论】：

标签： javascript dom innerhtml getelementbyid getelementsbyclassname

【解决方案1】：

我已经稍微更新了您的代码，您可以将侦听器附加到父级并调用remove，而不是为每个按钮添加侦听器，并检查事件目标是否为按钮并删除它的父级'li'。

<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>test</title>
    </head>
    <body>
        <input type="text" placeholder="Type something..." id="myInput">
        <button type="button" onclick="addmember();">Add Member</button>
    
        <p>Crew:</p>
    <ul class = "prova" id="crew1" onclick="remove(event)">
    
    </ul>
    
    
    
        <script>
            function addmember(){
    
                var z = getInputValue();
                var ul= document.getElementById("crew1");
                var li = document.createElement("li");
                li.appendChild(document.createTextNode(z));
                var button = document.createElement('button');
    			button.innerHTML = 'remove';
    			li.appendChild(button);
                ul.appendChild(li);
    
            }
            function remove (event) {
    			if(event.target.type == 'submit') {
    				event.target.parentElement.remove();
    			}
            }
    
            function getInputValue(){
                // Selecting the input element and get its value 
                var inputVal = document.getElementById("myInput").value;
    
                // Displaying the value
                return inputVal;
            }
        </script>
    </body>
    </html>

【讨论】：

你能解释一下这个函数吗：function remove (event) { if(event.target.type == 'submit') { event.target.parentElement.remove(); } } 我不明白发生了什么
是的，实际上我们正在向父级添加单个侦听器，所以现在如果您单击
文本，它也会触发此功能，但我们只想在按钮时删除按下。所以在这一行 (event.target.type == 'submit') 我们正在检查一个按钮是否被按下，然后简单地删除它的父级，即
。

谢谢！这很有帮助！

【解决方案2】：

您在这里覆盖整个元素z[i].innerHTML ="<button type=\"button\" \">Remove a member</button>"，而不是添加到它。相反，如果您想将按钮附加到元素，您应该使用类似 .appendChild() 的方法：

    var button = document.createElement("button");
    button.innerHTML = "Remove list element";
    button.onclick = function(e) {
      // Remove the list element here 
    }
    z[i].appendChild(button);

function addmember() {

  var z = getInputValue();
  var ul = document.getElementById("crew1");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(z));
  ul.appendChild(li);

}

function remove() {
  var r = document.getElementById("crew1");
  var z = r.getElementsByTagName("li");

  for (i = 0; i < z.length; i++) {
    var button = document.createElement("button");
    button.innerHTML = "Remove list element";
    button.onclick = function(e) {
      // Remove the list element here 
    }
    z[i].appendChild(button);
  }
}

function getInputValue() {
  // Selecting the input element and get its value 
  var inputVal = document.getElementById("myInput").value;

  // Displaying the value
  return inputVal;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>test</title>
</head>

<body>
  <input type="text" placeholder="Type something..." id="myInput">
  <button type="button" onclick="addmember();">Add Member</button>

  <p>Crew:</p>
  <ul class="prova" id="crew1">

  </ul>
  <button type="button" onclick="remove();">Remove</button>
</body>

</html>

【讨论】：

【解决方案3】：

每次添加成员时我都会添加一个按钮，然后向该按钮添加一个事件侦听器以删除该船员。

<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
    <input type="text" placeholder="Type something..." id="myInput">
    <button type="button" onclick="addmember();">Add Member</button>

    <p>Crew:</p>
<ul class = "prova" id="crew1">

</ul>



    <script>
        function addmember(){

            var z = getInputValue();
            var ul= document.getElementById("crew1");
            var li = document.createElement("li");
            var rem = document.createElement("button");
            rem.innerHTML = "REMOVE";
            rem.setAttribute("type","button");
            li.innerHTML = z;
            li.appendChild(rem);
            ul.appendChild(li);
            
            rem.addEventListener("click",function(){
                ul.removeChild(li);
             })

        }

        function getInputValue(){
            // Selecting the input element and get its value 
            var inputVal = document.getElementById("myInput").value;

            // Displaying the value
            return inputVal;
        }
    </script>
</body>
</html>

【讨论】：

【解决方案4】：

这是因为您将 li 的 innerHTML 替换为按钮，而您应该像这样附加它：

<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
    <input type="text" placeholder="Type something..." id="myInput">
    <button type="button" onclick="addmember();">Add Member</button>

    <p>Crew:</p>
<ul class = "prova" id="crew1">

</ul>
<button type="button" onclick="remove();">Remove</button>



    <script>
        function addmember(){

            var z = getInputValue();
            var ul= document.getElementById("crew1");
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(z));
            ul.appendChild(li);

        }
        function remove (){
            var r = document.getElementById("crew1");
            var z = r.getElementsByTagName("li");

            for(i = 0; i<z.length; i++){
                var button = document.createElement("button");
                button.innerHTML = "Remove a member";
                z[i].appendChild(button);
            }
        }

        function getInputValue(){
            // Selecting the input element and get its value 
            var inputVal = document.getElementById("myInput").value;

            // Displaying the value
            return inputVal;
        }
    </script>
</body>
</html>

【讨论】：

【解决方案5】：

您是手动添加到列表中还是有表格？

这里有一些帮助

function addItem() {
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementById("candidate");
  var li = document.createElement("li");
  li.setAttribute('id', candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
}

function removeItem() {
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementById("candidate");
  var item = document.getElementById(candidate.value);
  ul.removeChild(item);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Dynamically add/remove items from list - JavaScript</title>
</head>

<body>

  <ul id="dynamic-list"></ul>

  <input type="text" id="candidate" />
  <button onclick="addItem()">add item</button>
  <button onclick="removeItem()">remove item</button>

  <script src="script.js"></script>
</body>

</html>

更多信息请参考stackoverflow.com

【讨论】：