2

所以我试图在一个数组中基本上动态地创建 li，我想在每个 li 中创建一个“删除”按钮，这样当我点击那个 li 时，我可以删除那个特定的 li。

我知道这看起来很基本，但是我已经研究 JS 几个小时了，我开始在这里真正让自己感到困惑。我不断收到诸如 addChild() is not a function 之类的错误......我觉得我很接近，但没有雪茄。提前致谢！

无论如何，这是我的添加功能：

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!");
    }
}
4

2 回答 2

3

你似乎有一个奇怪的代码组合。忘记 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>
于 2012-11-01T02:17:17.993 回答
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()执行了两次，但是因为歌曲 'test' 已经存在，所以它只执行了一次结束动作。

于 2012-11-01T02:24:00.923 回答