Create a list (
) and then remove the elements

Question

I have to create a list based on the input of the user and then an option to remove an element if it's the case, I tried this.

My idea was to create the list and at the bottom have this "remove button" that once clicked on it it should have added a "remove" option for each element in the list but instead, I end up replacing all the elements of the list with this remove button, any tips?

    
        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>

score 1 · Accepted Answer · answered Apr 30 '20 at 19:56

I have updated your code a little bit, instead of adding listener to each button, you can attach listener to parent and call remove, and check if event target is button and remove it's parent '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>

Can u explain me the function: function remove (event) { if(event.target.type == 'submit') { event.target.parentElement.remove(); } } i don't understand what's happening — franco asd, Apr 30 '20 at 20:05
yes, actually we are adding a single listener to the parent, so now if you will click on

score 0 · Answer 2 · answered Apr 30 '20 at 19:51

You are overwriting the entire element here z[i].innerHTML ="<button type=\"button\" \">Remove a member</button>" rather than adding to it. Instead if you want to append the button to the element, you should use something like the .appendChild() method:

    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>

score 0 · Answer 3 · answered Apr 30 '20 at 19:54

I have added a button each time a member was added, then added an event listener to that button to just remove that crew member.

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

score 0 · Answer 4 · answered Apr 30 '20 at 19:56

This is because you are replacing the innerHTML of the li with the button when instead you should be appending it like this:

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

score 0 · Answer 5 · answered Apr 30 '20 at 20:00

are you added to the list manually or do you have a form?

here's something to help

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>

for more information please refer to stackoverflow.com

Create a list () and then remove the elements

5 Answers5

Create a list (
) and then remove the elements