创建一个列表（<li>）然后删除元素

Question

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

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

    
        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>

Answer 1

您在这里 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>

Answer 2

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

<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>

Answer 3

我已经稍微更新了你的代码，而不是为每个按钮添加监听器，你可以将监听器附加到父级并调用删除，并检查事件目标是否是按钮并删除它的父级 '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>

Answer 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>

Answer 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>

更多信息请参考whosebug.com

创建一个列表（<li>）然后删除元素

Create a list (<li>) and then remove the elements

javascript

dom

innerhtml

getelementbyid

getelementsbyclassname