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

コードの奇妙な組み合わせがあるようです。JavaScript を理解するまで、jQuery のことは忘れてください。

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

要素を作成する 1 つの方法に固執します。パーツを保持するためにドキュメントフラグメントを使用することを検討してください。

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

どこshowListから来たの？

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

>             deleteFromPlaylist(newSong);
>         });

すべてのブラウザがサポートしているわけではありませんaddEventListener。追加するリスナーは 1 つだけなので、ボタンの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

jqueryを含む混合物ではなく、純粋にjavascriptを使用するようにコードと関数を変更しました。私の行動を説明するために、コードにコメントを追加しました。ご不明な点がございましたら、お気軽にお問い合わせください。

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、 が 2 回実行されることに注意してadd()ください。ただし、曲 'test' が既に存在するため、終了アクションは 1 回だけ実行されます。

于 2012-11-01T02:24:00.923 に答える