Создать список (<li>), а затем удалить элементы - PullRequest
Новая
       107

Создать список (<li>), а затем удалить элементы

1 голос
/ 30 апреля 2020

Я должен создать список на основе ввода пользователя, а затем вариант, чтобы удалить элемент, если это так, я попробовал это.

Моя идея состояла в том, чтобы создать список и внизу есть ли эта «кнопка удаления», которая после нажатия на нее должна была добавить опцию «удалить» для каждого элемента в списке, но вместо этого я заменяю все элементы списка этой кнопкой удаления, какие-либо советы? 

    
        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>

Ответы [ 5 ]

1 голос
/ 30 апреля 2020

Я немного обновил ваш код, вместо того, чтобы добавлять слушателя к каждой кнопке, вы можете присоединить слушатель к родителю и вызвать 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 голосов
/ 30 апреля 2020

Вы добавлены в список вручную или у вас есть форма?

вот что поможет 

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

0 голосов
/ 30 апреля 2020

Это потому, что вы заменяете внутренний HTML 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">

</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 голосов
/ 30 апреля 2020

Я добавлял кнопку каждый раз, когда добавлялся участник, затем добавлял прослушиватель событий для этой кнопки, чтобы просто удалить этого члена экипажа. 

<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 голосов
/ 30 апреля 2020

Вы перезаписываете весь элемент здесь 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>
...