2015-11-06 51 views
-1
<html> 
<head> 
<title> 
Adding/Removing list item to/from list with JavaScript 
</title> 

<script type="text/javascript"> 
function appendNewNode(){ 
    if(!document.getElementById) return; 

    var newlisttext = document.changeform.newlist.value; //getting text from textfield 

    var mylist=document.getElementById("mylist"); 

    var newlistitem=document.createElement("li"); //creating new element node <li> 
    var newlistitemtext=document.createTextNode(newlisttext); //creating text node with text retrieved from textfield 
    newlistitem.appendChild(newlistitemtext); //Inserting text to <li>  

    mylist.appendChild(newlistitem); //appending <li> to <ul> 

    document.changeform.newlist.value=""; //setting textfield value to blank 
    document.changeform.newlist.focus(); //setting focus to textfield 
} 

function removeNode(){ 
    mylist.removeChild(mylist.lastChild); 
} 
</script> 
</head> 

<body> 

    <ul id='mylist'> 
     <li>First</li> 
     <li>Second</li> 
    </ul> 


    <form name="changeform"> 
     <input type="text" name="newlist" size="65"> 
     <input type="button" onclick="appendNewNode();" value="Append To List"> 


     <input type="button" onclick="removeNode();" value="Remove from List"> 
    </form> 
</body> 
</html> 

該代碼添加新的列表點擊添加列表按鈕,但我想後刪除列表中輸入文本框,然後按相同的文字刪除,只刪除列表刪除列表中通過比較其

例如,假設我要刪除列表二,所以我會在newlist文本框,然後按輸入「二」刪除按鈕,僅刪除列表

回答

0
function removeNode(){ 
var newlisttext = document.changeform.newlist.value; 
var mylist=document.getElementById("mylist"); 
var listItems = mylist.getElementsByTagName('li'); 
for(var i = 0; i < listItems.length; i++) { 
    var elem = listItems[i]; 
    if (newlisttext === elem.innerText) { 
     elem.parentNode.removeChild(elem); 
    } 
} 
} 
+0

thanx ...這就是我想要的.... thanx aton ... –

+0

我在其他地方嘗試了警報,但沒有正常工作,當用戶嘗試刪除不是正確的在以前創建的列表中。 –

+0

你是否意指警覺(「某事」); ? – Payson

0
function removeNode(){ 
     var newlisttext = document.changeform.newlist.value; 
     if(newlisttext ==''){alert('Please Enter List Name to Delete!');} 
     var mylist=document.getElementById("mylist"); 
     var listItems = mylist.getElementsByTagName('li'); 
     for(var i = 0; i < listItems.length; i++) { 
      var elem = listItems[i]; 
      if (newlisttext === elem.innerHTML) { 
       elem.parentNode.removeChild(elem); 
      }else{alert('This list is not found !');} 
     } 
} 

警報無法正常工作。