Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Marvin Müller
Marvin Müller
8,884 Points

Appending a Button to a new LI Element. But only the first created Element appends it

Hello Folks,

I was recreating a challenge from the javascript course were I appending a button element directly to a newly created Listelement to delete this one. The problem is : only the first element I create with my Button is getting the "Delete this task" button. Any clue why ? Here's the JS code:

const createButton = document.querySelector("#create");
const lastDelete = document.querySelector("#delete");
const listDelete = document.createElement("Button");
listDelete.textContent = "Delete this Task";

createButton.addEventListener("click", () => {
    var ul = document.getElementsByTagName("ul")[1];
    var newListItem = document.createElement("li");
    ul.appendChild(newListItem);
    newListItem.textContent = taskInput.value;
    newListItem.append(listDelete);
    taskInput.value = " ";
});

If you need anything else , just tell me :)

Thanks in advance

Hello Marvin. You question would be clearer if you add the html too...

4 Answers

Hi Marvin, I can see where the error is... the reason why only one instance of the listdelete button is created is because you created the listdelete outside the event listener. So that gives you only 1 instance. but if you want a listdelete button inside every task you create you need to put the code inside the event listener so an instance of listdelete is created each time you click on the create new task like this...

   <div id="taskDiv">
        <h1 class="taskHeadline">Liste aller Aufgaben</h1>
            <ul class="taskListe">

            </ul>
            <input type ="text" placeholder="Taskname" class="task">
            <button id="create">Create new Task</button>
            <button id="delete">Delete last created Task</button>
    </div>
    <script>
        const createButton = document.querySelector("#create");
        const lastDelete = document.querySelector("#delete");
        //I removed the listdelete and put it inside the eventlistener

        createButton.addEventListener("click", () => {
            var ul = document.getElementsByTagName("ul")[0];  //Also I replace the index with 0 to select the ul 
            var newListItem = document.createElement("li");
            const listDelete = document.createElement("Button");
            listDelete.textContent = "Delete this Task";
            const taskInput = document.getElementsByClassName('task')[0]; // And l declared the taskInput variable since you didn't declare it 
            newListItem.textContent = taskInput.value;
            newListItem.append(listDelete);
            ul.appendChild(newListItem);
            taskInput.value = " ";
        });
   </script>
I hope this helps.
Marvin Müller
Marvin Müller
8,884 Points

Sure. Here's whats relevant for that one:

<div id="taskDiv">
        <h1 class="taskHeadline">Liste aller Aufgaben</h1>
            <ul class="taskListe">

            </ul>
                <input type ="text" placeholder="Taskname" class="task">
                <button id="create">Create new Task</button>
                <button id="delete">Delete last created Task</button>
    </div>
Marvin Müller
Marvin Müller
8,884 Points

ahhh sure okay that makes total sense :D . THANK YOU. Problem now is , that my click event for the listDelete button is now outside the other eventlistener XD so that listDelete is not declared and has no function :P Any Idea?

Marvin Müller
Marvin Müller
8,884 Points

Okay seems like you can put eventlisteners into eventlisteners....so nvm