Trying to appendChild an user input and a button element into the same <li>

Question

i am trying to get a event planner app to show some user input and subsequently allow them to delete it when needed.

i have the input part working, but i can't figure out how to get a button with "delete" added to the same li when the user presses Enter.

this is my JS so far: (what do i need to add to get the button included in the li)

 function todoList(){ const item: string = (<HTMLInputElement>document.getElementById('todoInput')).value; const text = document.createTextNode(item) const newItem = document.createElement('li') const button: any = document.createElement("button") button.innerHTML = 'Delete'; newItem.appendChild(text) // @ts-ignore } const form = (<HTMLInputElement>document.getElementById('todoForm')) form.addEventListener("submit", (e) => { e.preventDefault(); })

 <h1 class="title">todos</h1> <form id="todoForm" onsubmit="todoList()" > <button id="scrolldown-menu-toggle">˅</button> <input type="text" id="todoInput" placeholder="Fill in your plan"> </form> <ol id="todoList"> </ol>

Answer 1

You need to append the button into the <li> as well. So you would want to do this -

function todoList(){
   const item: string = 
(<HTMLInputElement>document.getElementById('todoInput')).value;
   const text = document.createTextNode(item)
   const newItem = document.createElement('li')

   const button: any = document.createElement("button")
   button.innerHTML = 'Delete';

   newItem.appendChild(text)
   newItem.appendChild(button) // <--- Add this line
   

   // @ts-ignore
}

Answer 2

This seems to work:

 function todoList() { // <HTMLInputElement> removed as the snippet will not run otherwise. // This does however not seem to affect the execution of the code. // Read the input text into variable: const item: string = (document.getElementById('todoInput')).value; // Create text-node: const text = document.createTextNode(item); // Create list item: const newItem = document.createElement('li'); // Create button: const button: any = document.createElement("button"); // Create button text node and append it to button: const btnText = document.createTextNode('Delete'); button.appendChild(btnText); // Add handler to actually delete the entry: button.addEventListener('click', e => newItem.remove()); // Append text and button to the list item: newItem.appendChild(text); newItem.appendChild(button); // Append list item to the ordered list: document.getElementById('todoList').appendChild(newItem); // @ts-ignore } const form = (document.getElementById('todoForm')) form.addEventListener("submit", (e) => { e.preventDefault(); })

 <h1 class="title">todos</h1> <form id="todoForm" onsubmit="todoList()"> <button id="scrolldown-menu-toggle" type="submit">˅</button> <input type="text" id="todoInput" placeholder="Fill in your plan" /> </form> <ol id="todoList"> </ol>