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

问题描述 投票：0回答：1

我必须根据用户的输入创建一个列表，然后如果是这样的话，还要有一个删除元素的选项，我试过这样做。

我的想法是创建列表，然后在底部有这个 "删除按钮"，一旦点击它，应该为列表中的每个元素添加一个 "删除 "选项，但我最终却用这个删除按钮替换了列表中的所有元素，有什么技巧吗？

    
        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个回答
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>
0
投票

你在这里覆盖整个元素 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>
0
投票

我在每次添加成员时都添加了一个按钮 然后在按钮上添加了一个事件监听器来删除该成员。

<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>
0
投票

这是因为你把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>
0
投票

你是手动添加到列表中的还是有一个表格？

这里有一些东西可以帮助你 

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.