Javascript How to delete element when button is clicked

Question

I'm trying to make my basic to do list better and I want to be able to delete a task when a button is clicked. How can I go about doing this? I've given the button dynamic ID's but cant seem to find out how to return that specific ID when a specific button is clicked.

Javascript

let Task = [];

function addTask(){
    //assign input to array
    var task = document.getElementById("userInput").value;
    Task.push(task);

    //creates node and shows where to find value
    let node = document.createElement("li");
    let textNode = document.createTextNode(
        document.getElementById("userInput").value
    );

    //create button for text node to delete
    const btn = document.createElement('button');
    btn.innerHTML = 'Delete';


    //adds task to webpage
    node.appendChild(textNode);
    document.getElementById("myList").appendChild(node);


    //Adds button to webpage, gives button dynamic ID
    document.getElementById("myList").appendChild(btn).id = Task.length;


}

MarcelloCosta · Accepted Answer · 2021-03-29 16:59:53Z

1

If I understand correctly what you want is to assign a dynamic ID and return that ID by clicking the button, correct?

In this case you can try something like:

// Adds button to webpage, gives button dynamic ID
document.getElementById("myList").appendChild(btn);
btn.setAttribute("id", "myCustomId");

document.getElementById("myList").appendChild(btn);
btn.setAttribute("onclick", "alert('Current button ID: '+this.id)");

answered Mar 29, 2021 at 16:59

MarcelloCosta

113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

scorpio Over a year ago

Wheres a good place to find more information about javascript working with html?

Barmar Over a year ago

Don't create custom attributes, use data-XXX attributes.

MarcelloCosta Over a year ago

You can find tutorials about HTML + JS in Youtube (like in freeCodeCamp.org channel)

Collectives™ on Stack Overflow

Javascript How to delete element when button is clicked

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related