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

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

CodePudding user response：

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
}

CodePudding user response：

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