Question

我正在尝试在列表中显示用户输入的名称。每个名称都有一个删除按钮，当单击删除按钮时，应从显示的列表中删除该名称。我能够创建列表，但我面临的问题是删除。我正在使用removeChild()从列表中删除特定名称，但我收到错误Uncaught TypeError: Cannot read property 'removeChild' of undefined所以我无法找到错误，也无法继续。我需要删除帮助请帮助我。在此先感谢：）

Plunker Work

<!DOCTYPE html>
<html>
<head>
  <title>Task 1</title>
</head>
<body>
<label>Name: </label>
<input type="text" name="userName" id="nameOfuser" />
<button onclick="addNew()">Submit</button>
<ul id="nameList">

</ul>

<script type="text/javascript">
  function addNew(){
    var newUserName = document.getElementById("nameOfuser").value;
    var createList = document.createElement("li");    
    var pop = document.createTextNode(newUserName);
    createList.appendChild(pop);

    var closeButton = document.createElement("button");
    var closeText = document.createTextNode("Del");
    closeButton.appendChild(closeText);
    closeButton.setAttribute("id","deleteButton");
    closeButton.setAttribute("onclick","deleteFun()");
    document.body.appendChild(closeButton);
    if(newUserName == ''){
           alert("Error");
    }else{        document.getElementById("nameList").appendChild(createList).appendChild(closeButton);
        }
      }

    function deleteFun(){
      var fullList = document.getElementById("nameList").value;
      var newUserName = document.getElementById("nameOfuser").value;
      fullList.removeChild(newUserName);
    }

    </script>
    </body>
    </html>

Answer 1

您的代码存在一些问题。首先，导致错误是因为您使用了document.getElementById("nameList").value而不是document.getElementById("nameList")。

其次，您要为所有删除按钮closeButton.setAttribute("id","deleteButton");

设置相同的ID

第三，如果输入字段为空，则表示您正在向用户发出提醒，但仍然会向body元素添加删除按钮。

我认为这会做你想做的事情：

function addNew(){
    var newUserName = document.getElementById("nameOfuser").value;
    var createList = document.createElement("li");    
    var pop = document.createTextNode(newUserName);
    createList.appendChild(pop);

    var closeButton = document.createElement("button");
    var closeText = document.createTextNode("Del");
    closeButton.appendChild(closeText);
    closeButton.setAttribute("onclick","deleteFun()");
    if(newUserName == ''){
       alert("Error");
    }else{
        document.getElementById("nameList").appendChild(createList).appendChild(closeButton);
    }
}

function deleteFun(){
  var fullList = document.getElementById("nameList");
  fullList.removeChild(event.target.parentNode);
}

<!DOCTYPE html>
<html>
<head>
  <title>Task 1</title>
</head>
<body>
  <label>Name: </label>
  <input type="text" name="userName" id="nameOfuser" />
  <button onclick="addNew()">Submit</button>
  <ul id="nameList">
  </ul>
</body>
</html>

在这里，我使用了event.target.parentNode来获取点击的“Del”按钮的li父元素。

另一种方法是使用这样的东西：

function addNew(){
    if(newUserName == ''){
       alert("Error");
    }else{
        var newUserName = document.getElementById("nameOfuser").value;
        var createList = document.createElement("li");    
        var pop = document.createTextNode(newUserName);
        createList.appendChild(pop);

        var closeButton = document.createElement("button");
        var closeText = document.createTextNode("Del");
        closeButton.appendChild(closeText);
        closeButton.onclick = function(){
            document.getElementById("nameList").removeChild(createList);
        }
        document.getElementById("nameList").appendChild(createList).appendChild(closeButton);
    }
}

<!DOCTYPE html>
<html>
<head>
  <title>Task 1</title>
</head>
<body>
  <label>Name: </label>
  <input type="text" name="userName" id="nameOfuser" />
  <button onclick="addNew()">Submit</button>
  <ul id="nameList">
  </ul>
</body>
</html>

Answer 2

<script type="text/javascript">
  function addNew(){
    var newUserName = document.getElementById("nameOfuser").value;
    var createList = document.createElement("li");    
    var pop = document.createTextNode(newUserName);
    createList.appendChild(pop);

    var closeButton = document.createElement("button");
    var closeText = document.createTextNode("Del");
    closeButton.appendChild(closeText);
    closeButton.setAttribute("id","deleteButton");
    closeButton.setAttribute("onclick","deleteFun(this)");
    document.body.appendChild(closeButton);
    if(newUserName == ''){

    }else{
      document.getElementById("nameList").appendChild(createList).appendChild(closeButton);
    }
  }

function deleteFun(btnDelete){
 document.getElementById("nameList").removeChild(btnDelete.parentNode); 
}

</script>

Answer 3

问题在这里，我想。

 function deleteFun(){
  var fullList = document.getElementById("nameList").value;
  var newUserName = document.getElementById("nameOfuser").value;
  fullList.removeChild("pop");
}

您从node元素获取值，您不能在其上调用removeChild。如果要调用remove child，则必须将其应用于节点元素

Answer 4

将“发件人”数据发送到deleteFun，如deleteFun(this)
在deleteFun内获取列表var fullList = document.getElementById("nameList");

然后调用删除发件人的父节点fullList.removeChild(sender.parentNode);，即li项

<!DOCTYPE html>
<html>
<head>
  <title>Task 1</title>
</head>
<body>
<label>Name: </label>
<input type="text" name="userName" id="nameOfuser" />
<button onclick="addNew()">Submit</button>
<ul id="nameList">

</ul>

<script type="text/javascript">
  function addNew(){
    var newUserName = document.getElementById("nameOfuser").value;
    var createList = document.createElement("li");    
    var pop = document.createTextNode(newUserName);
    createList.appendChild(pop);

    var closeButton = document.createElement("button");
    var closeText = document.createTextNode("Del");
    closeButton.appendChild(closeText);
    closeButton.setAttribute("id","deleteButton");
    //send the element into deleteFun
    closeButton.setAttribute("onclick","deleteFun(this)");
    document.body.appendChild(closeButton);
    if(newUserName == ''){
           alert("Error");
    }else{        document.getElementById("nameList").appendChild(createList).appendChild(closeButton);
        }
      }

    function deleteFun(sender){
      var fullList = document.getElementById("nameList");
      //remove list item from the ul
      fullList.removeChild(sender.parentNode);
    }

    </script>
    </body>
    </html>

从列表中删除特定名称

4 个答案: