從列表中刪除特定名稱

我試圖在列表中顯示用戶輸入的名稱。每個名稱都有一個刪除按鈕，當點擊刪除按鈕時，該名稱應該從顯示的列表中刪除。我能夠創建列表，但我面臨的問題是在刪除。林使用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>

來源

2017-04-19 devanya

您已經使用'的document.getElementById（「名稱列表」）。value'，而不只是'的document.getElementById（「名稱列表」）' – Titus

我仍然得到相同的錯誤 – devanya

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

來源

2017-04-19 06:49:07 Krushna

代碼只有答案真的不滿意，試着解釋爲什麼你的代碼將做什麼OP是要求 – Icepickle

嘗試上面的代碼，我有更新下面的鏈接 http://plnkr.co/編輯/ z0vo1esRpXFFIfT1vNgx？p =預覽 – Krushna

沒有Krushna，編輯你的答案並解釋你在做什麼不同從OP可能做的事情租用。指出他的錯誤在哪裏（我不是提問者） – Icepickle

問題就在這裏，我想。

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

您從節點元素獲取值時，無法調用removeChild。如果您想要調用remove child，則必須將其應用於節點元素

來源

2017-04-19 06:41:54 Brissy

您的代碼有幾個錯誤。首先，錯誤是由於您使用了document.getElementById("nameList").value而不是document.getElementById("nameList")而導致的。

其次，你在同一個ID設置爲全部刪除按鈕closeButton.setAttribute("id","deleteButton");

第三，如果輸入字段爲空，你提醒用戶，但你仍然添加刪除按鈕的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獲得點擊「刪除」按鈕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>

來源

2017-04-19 06:57:38 Titus

發送「發件人」數據deleteFun這樣deleteFun(this)
內deleteFun獲取列表var fullList = document.getElementById("nameList");

然後調用remove發件人的parentnode 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>

來源

2017-04-19 07:12:09

從列表中刪除特定名稱

回答

相關問題