JavaScript and the DOM Manipulation (Creating and Deleting)

Question

So I'm trying to to basically dynamically create li's inside an array, and I would like to create a 'delete' button within each li, so that when I click that li, I can delete that specific li.

I know this seems very basic, but I've been looking at JS for hours now, and am starting to really confuse myself here. I keep getting errors like addChild() is not a function... I feel like I'm close, but no cigar. Thanks in advance!

Anyway, here's my add 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 = '' + "" + "" + '';
        // $(newSong).appendChild(deleteBtn);
        $(deleteBtn).appendTo("#playlist-1");
        $(newSong).appendTo("#playlist-1");
        showList.push(newSong);

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

Here's my delete function

function deleteFromPlaylist(newSong){
    var deleteBtn = document.getElementsByTagName('deleteButton');
    // var deleteMe = deleteBtn.parentNode;
    alert(deleteBtn);
    for(i=0;i



EDIT: 1 More Related Question

I would like to only add an item if it doesn't exist already in the array. Here is what I have so far. Any tips on where I'm going wrong?

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

Daedalus · Accepted Answer

I've altered your code and functions to purely use javascript, instead of a mixture containg jquery. I've added comments in the code to explain my actions. If you have any questions, feel free to ask.

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 += '' + "test " + inc + "" + '
'; //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
}

Update: I've modified the above function to strictly use objects, rather than strings, because it is easier to extract relevant information from objects, than strings.

I've added in comments to assist with understanding the code. Again, if you have any questions, feel free to ask.

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, notice that add() is executed twice, but because the song 'test' already exists, it only executes the end action once.

JavaScript and the DOM Manipulation (Creating and Deleting)

Answers (2)

Related Questions