JavaScript和DOM操作（創建和刪除）

Question

所以我試圖基本上動態地創建一個數組裏面的li，並且我想在每個li中創建一個'刪除'按鈕，這樣當我點擊那個li ，我可以刪除那個特定的li。

我知道這看起來很基本，但我現在一直在尋找JS好幾個小時，而且我開始在這裏迷惑自己。 我不斷收到像addChild（）這樣的錯誤不是函數......我覺得我很接近，但沒有雪茄。提前致謝！

總之，這裏是我的附加功能：

function add(){ 
    var deleteBtn = document.createElement('input'); 
    deleteBtn.type = 'submit'; 
    deleteBtn.name = 'addButton'; 
    deleteBtn.className = 'deleteButton'; 

    for(i=0;i<1;i++){ 
     id_number[i] = i+1; 

     var newSong = '<li class="li_test" id="' + id_number[i] + '">' + "<span>" + "</span>" + '</li>'; 
     // $(newSong).appendChild(deleteBtn); 
     $(deleteBtn).appendTo("#playlist-1"); 
     $(newSong).appendTo("#playlist-1"); 
     showList.push(newSong); 

     deleteBtn.addEventListener('click', function(evt) { 
      deleteFromPlaylist(newSong); 
     }); 
    } 
} 

這是我的刪除功能

function deleteFromPlaylist(newSong){ 
    var deleteBtn = document.getElementsByTagName('deleteButton'); 
    // var deleteMe = deleteBtn.parentNode; 
    alert(deleteBtn); 
    for(i=0;i<showList.length;i++){ 
     if(newSong === showList[i]){ 
      showList.splice(i,1); 
      // var pp = p.parentNode; 

      // pp.removeChild (p); 
      deleteMe = deleteMe.parentNode.remove("li_test"); 
      deleteMe.removeChild(deleteBtn); 
     } 
    // console.log(deleteMe); 
     } 
    } 

編輯：1更多相關問題

我想，如果只添加一個項目它不存在於數組中。這是我到目前爲止。關於我要去哪裏的任何提示錯誤？

for (i = 0; i < showList.length; i++) { 

    if (newSong !== showList[i]){ 
     ul_list.innerHTML = newSong; 
     container_div.appendChild(ul_list); //append the info 
     container_div.appendChild(deleteBtn); 

     document.getElementById('playlist-1').appendChild(container_div); //finally add it to the playlist div 

     showList.push(newSong); 

     deleteBtn.addEventListener('click', function(evt) { 
      deleteFromPlaylist(evt, newSong); 
     }); 
     inc++; 
     alert("It IS in the Array!"); 
    }else{ 
     alert("This already exists!"); 
    } 
} 

Answer 1

我已經改變了你的代碼和功能純粹使用JavaScript，而不是混合方含jQuery的。我在代碼中添加了註釋來解釋我的操作。如果你有任何問題隨時問。

var showList = []; 
var inc = 1; 

function add() { 
    //create the container element. If we do this, keeping track of all elements 
    //becomes easier, since we just have to remove the container. 
    var container_div = document.createElement('div'); 
    container_div.id = "cont_" + inc; 

    var ul_list = document.createElement('ul'); 

    var deleteBtn = document.createElement('input'); 
    deleteBtn.type = 'button'; 
    deleteBtn.value = 'remove song'; 
    deleteBtn.name = 'addButton'; 
    deleteBtn.className = 'deleteButton'; 

    var id_number = []; 
    var newSong = ""; 
    for (i = 0; i < 1; i++) { 
     id_number[i] = i + 1; 

     newSong += '<li class="li_test" id="cont_' + inc + '_song_id_' + id_number[i] + '">' + "<span>test " + inc + "</span>" + '</li>\n'; //all ids must be unique, so we construct it here 
    } 

    ul_list.innerHTML = newSong; 
    container_div.appendChild(ul_list); //append the info 
    container_div.appendChild(deleteBtn); 

    document.getElementById('playlist-1').appendChild(container_div); //finally add it to the playlist div 

    showList.push(newSong); 

    deleteBtn.addEventListener('click', function(evt) { 
     deleteFromPlaylist(evt, newSong); 
    }); 
    inc++; 
} 

function deleteFromPlaylist(evt, newSong) { 
    var deleteBtn = evt.target; //target the button clicked, instead of a list of all buttons 
    var container_div = deleteBtn.parentNode; //get the parent div of the button 
    var cont_parent = container_div.parentNode; //and the parent of the container div 
    for (i = 0; i < showList.length; i++) { 
     if (newSong === showList[i]) { 
      showList.splice(i, 1); 
     } 
    } 
    cont_parent.removeChild(container_div); //finally, remove the container from the parent 
} 

更新： 我修改了上面的功能要嚴格使用對象，而不是字符串，因爲它更容易從對象中提取相關信息，不是字符串。

我已在評論中添加以幫助理解代碼。再次，如果您有任何問題，請隨時詢問。

function add() { 
    var list_bool; 
    //create the container element. If we do this, keeping track of all elements 
    //becomes easier, since we just have to remove the container. 
    var container_div = document.createElement('div'); 
    container_div.id = "cont_" + inc; 

    var ul_list = document.createElement('ul'); 

    var deleteBtn = document.createElement('input'); 
    deleteBtn.type = 'button'; 
    deleteBtn.value = 'remove song'; 
    deleteBtn.name = 'addButton'; 
    deleteBtn.className = 'deleteButton'; 

    var list_item = document.createElement("li"); //create list element 
    list_item.className = "li_test"; //set element class 
    var list_span = document.createElement("span"); //create span element 
    list_span.innerHTML = "test"; //set span text 
    list_item.appendChild(list_span); //append span to list element 

    ul_list.appendChild(list_item); //append list element to un-ordered list element 
    var list_bool = false; //create local boolean variable 
    if (showList.length > 0) { // loop through showList if it isn't empty 
     for (var i = 0; i < showList.length; i++) { 
      if (showList[i].innerText !== list_item.innerText) { 
       list_bool = true; //if song exists(comparing text values, set bool to true 
      } else if (showList[i].innerText === list_item.innerText) { 
       list_bool = false; //else, set it to false 
       break; //break out of loop.. we don't want it becoming true again, now do we? 
      } 
     } 
    } else { 
     list_bool = true; //showList is empty, set to true 
    } 
    if (list_bool) { //if true, do action of appending to list 
     container_div.appendChild(ul_list); //append the info 
     container_div.appendChild(deleteBtn); 

     document.getElementById('playlist-1').appendChild(container_div); //finally add it to the playlist div 
     showList.push(list_item); 
     deleteBtn.addEventListener('click', function(evt) { 
      deleteFromPlaylist(evt, newSong); 
     }); 
     inc++; 
    } 
} 

DEMO，注意add()被執行了兩次，但因爲歌曲「檢驗」已經存在，它只有一次執行行動進行到底。

Answer 2

你似乎有一個奇怪的混合代碼。忘記jQuery的東西，直到你知道JavaScript。

> function add(){ 
>  var deleteBtn = document.createElement('input'); 
>  deleteBtn.type = 'submit'; 

我不認爲這是一個好主意。使用類型按鈕或按鈕元素更好。

>  deleteBtn.name = 'addButton'; 
>  deleteBtn.className = 'deleteButton'; 
> 
>  for(i=0;i<1;i++){ 

據推測i將來會更高一些。 ;-)

>   id_number[i] = i+1; 

id_number從哪來的？

> 
>   var newSong = '<li class="li_test" id="' + id_number[i] + '">' + "<span>" + "</span>" + '</li>'; 
>   // $(newSong).appendChild(deleteBtn); 

堅持一種創建元素的方法。考慮使用文檔片段來保存這些部分。

>   $(deleteBtn).appendTo("#playlist-1"); 
>   $(newSong).appendTo("#playlist-1"); 
>   showList.push(newSong); 

showList從何而來？

>   deleteBtn.addEventListener('click', function(evt) { 

>    deleteFromPlaylist(newSong); 
>   }); 

並非所有的瀏覽器都支持addEventListener。由於您只添加了一個偵聽器，請考慮分配給按鈕的onclick屬性。請注意，newSong只是一個字符串。

>  } 
> } 

在其它功能：

> function deleteFromPlaylist(newSong){ 
>  var deleteBtn = document.getElementsByTagName('deleteButton'); 

沒有HTML 「deleteButton」 元素，這樣就會返回一個空的集合。

>  // var deleteMe = deleteBtn.parentNode; 
>  alert(deleteBtn); 
>  for(i=0;i<showList.length;i++){ 
>   if(newSong === showList[i]){ 
>    showList.splice(i,1); 
>    // var pp = p.parentNode; 
> 
>    // pp.removeChild (p); 
>    deleteMe = deleteMe.parentNode.remove("li_test"); 

deleteMe從哪裏來？你註釋了它在哪裏被聲明，並且它沒有被賦值，所以deleteMe.parentNode會拋出一個錯誤。

>    deleteMe.removeChild(deleteBtn); 
>   } 
>  // console.log(deleteMe); 
>  } 
>  } 
> } 

總之，這裏的一些工作的代碼，它仍然是相當可怕的，但我會離開它給你去改進它。

<script> 

var showList = []; 

function add(){ 
    var id_number = []; 
    var deleteBtn = document.createElement('input'); 
    deleteBtn.type = 'button'; 
    deleteBtn.name = 'addButton'; 
    deleteBtn.className = 'deleteButton'; 
    deleteBtn.value = 'Delete Button'; 

    for (i=0; i<1; i++) { 
     id_number[i] = i + 1; 

     // '<li class="li_test" id="' + id_number[i] + '">' + "<span>" + "</span>" + '</li>'; 
     var newSong = document.createElement('li'); 
     newSong.className = 'li_test'; 
     newSong.id = id_number[i]; 
     newSong.appendChild(document.createElement('span').appendChild(document.createTextNode('song'))); 
     showList.push(newSong); 
     deleteBtn.onclick = (function(id) { 
           return function(){deleteFromPlaylist(id);} 
          }(newSong.id)); 
     newSong.appendChild(deleteBtn); 
     document.getElementById('playlist-1').appendChild(newSong); 
    } 
} 

function deleteFromPlaylist(id) { 
    var song = document.getElementById(id); 
    if (song) { 
     song.parentNode.removeChild(song); 
    } 
} 

window.onload = function() { 
    add(); 
} 

</script> 

<ul id="playlist-1"> 
    <li>Original 
</ul>