How to remove list item using button on said list item

javascript add remove list items
javascript remove list item from ul
remove list item in javascript
how to remove div on button click in javascript
javascript todo list delete
remove element onclick javascript
how to create a delete button in javascript
add and remove items from listbox using javascript

Im building a todo list and Im having trouble figuring out the remove function. I keep getting an error that states "Node not found".

I was coding most a lot of this on my own but I looked up a tutorial for this part. They suggested using:

function removeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};

I tried to apply it to the code i already had but it doesn't seem to work. also im not entirely clear on the logic of:

var item = this.parentNode.parentNode;
var parent = this.parentNode;

If someone could also explain what this does also that would be greatly appreciated.

HTML:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="resources/css/styles.css">
  </head>
<body>

<header id="addtodo">

  <input type="text" id="input" placeholder="Add an item"/>
  <button id="button"  type="button">Add item</button>
</header>

  <div id="listcontainer">
    <ul id="itemlist">

    </ul>
  </div>

  <div id="dividerline">

  </div>

  <div id="completecontainer">
    <ul id="completed">

    </ul>
  </div>



    <script src="resources/JS/code.js"></script>
  </body>

JavaScript:

document.getElementById('button').addEventListener('click', function(){
var value = document.getElementById('input').value;

var item = document.createElement("li");

var itemText = document.createTextNode(value);

var itemdiv= document.createElement('div');
var buttons=document.createElement('div');
var text=document.createElement('div');

var remove = document.createElement("button");
var complete = document.createElement("button");
var itemlist = document.getElementById('itemlist');




item.appendChild(itemdiv);
itemdiv.appendChild(text);
text.appendChild(itemText);
itemdiv.appendChild(buttons);
buttons.appendChild(complete);
buttons.appendChild(remove);

remove.innerHTML = 'Remove';
complete.innerHTML = 'Complete';

remove.classList.add('remove');
remove.setAttribute('id','remove');

complete.classList.add('complete');
complete.setAttribute('id','complete');

buttons.classList.add('buttondiv');
text.classList.add('text');
itemdiv.classList.add('itemdiv');

remove.addEventListener('click', removeItem);
complete.addEventListener('click', completeItem);

itemlist.insertBefore(item, itemlist.childNodes[0]);
});


function removeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};

function completeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};

I want the remove button to remove the list item its attached to.

At the first, use console.log() function to debug your code:

  function removeItem() {
    var item = this.parentNode.parentNode;
    var parent = this.parentNode;
    console.log( 'item', item ); // => <div class="itemdiv">
    console.log( 'parent', parent ); // => <div class="buttondiv">
    parent.removeChild(item);
  };

As you can see: 1) You mixed up item and parent nodes. 2) If you want to delete a whole <li> element, you have to use more parentNode:

function removeItem() {
  var parent = this.parentNode.parentNode.parentNode.parentNode;
  var item = this.parentNode.parentNode.parentNode;
  console.log( 'item', item ); // => <li>
  console.log( 'parent', parent ); // => <ul id="itemlist">
  parent.removeChild(item);
};

Or call remove() method right on your item:

function removeItem() {
  var item = this.parentNode.parentNode.parentNode;
  item.remove();
};

But the best way be using closest() method:

function removeItem() {
  var item = this.closest( 'li' );
  item.remove();
};

Deleting To-Do List Items, We'll add a delete button at the right side of a list item and again, use a <span> element to simulate a button, and use the HTML ✗ entity that looks like  To delete a list item, call the deleteObject () function on the object. The following example uses the getItemById (id) function to return the second item from the list, and then deletes the item. SharePoint Foundation 2010 maintains the integer IDs of items within collections, even if they have been deleted.

The error is in the function

function completeItem() {
  var item = this.parentNode.parentNode;
  var parent = this.parentNode;
  parent.removeChild(item);
};

Swap the item and parent, like so: parent.removeChild(item);

The Information Specialist's Guide to Searching and Researching on , BronseLEssentials add the Web page to the favorites list, to create a shortcut to the To delete an item, click on Favorites in the standard buttons bar, select the said about using the mouse relates to using the left or primary mouse button,  * To remove an item at from the list, use * void remove (int index)

For this case arrows functions are the most easiest way : (and clone node too)

const myButton       = document.getElementById('my-button')
    , textInput      = document.getElementById('text-input')
    , ListItems      = document.getElementById('itemlist')
    , LI_clone4Items = document.querySelector('#clone4Items > li')

var count = 0

myButton.onclick=_=>
{
  let newLI = LI_clone4Items.cloneNode(true)
  ListItems.insertBefore(newLI, ListItems.childNodes[0])
  newLI.querySelector('.text').textContent = textInput.value
  newLI.querySelector('.complete').onclick =_=> { ListItems.removeChild(newLI) }
  newLI.querySelector('.remove').onclick   =_=> { ListItems.removeChild(newLI) }
  textInput.value = ''
  myButton.disabled = true
}

(textInputControl =_=> { myButton.disabled = (textInput.value.trim()==='') })()

textInput.oninput = textInputControl
<header id="addtodo">
  <input type="text" id="text-input" placeholder="Add an item" />
  <button id="my-button" type="button">Add item</button>
</header>

<div id="listcontainer">
  <ul id="itemlist"></ul>
</div>

<div id="dividerline">
</div>

<div id="completecontainer">
  <ul id="completed"></ul>
</div>

<!-- hidden -->
<div style="display:none">
  <ul id="clone4Items">
    <li>
      <div class="itemdiv">
        <div class="text"></div>
        <div class="buttondiv">
          <button class="complete" >Complete</button>
          <button class="remove" >Remove</button>
        </div>
      </div>
    </li>
  </ul>

Learn to Program with Visual Basic 2010 Express, Now click the Reset button, and all the selections should be cleared. “The first item in the list box is number 0,” I said, “the second item is 1 and so on. Checked = False “Next we remove the check mark in the Complete Place Setting check  Dynamically deleting (removing) multiple items from ListBox control in ASP.Net. When the Delete button is clicked, a loop is executed over the ListBox items and each selected ListBox item is added to a Generic List of ListItem class. Note: It is not permitted to remove an item from a collection inside its own loop and hence we need to create another collection to hold the Items to be deleted from the ListBox control.

The simplest solution is to forget parentNode and just give the new <li> a unique class. Then, you can remove the <li> with the closest() method.

Also, you are creating some unnecessary nodes and should really name the variables more descriptively.

Additionally, you can't have multiple elements with the same id and frankly, you don't need the new elements to have ids in the first place, so forget that.

Lastly, do all the creation and configuration of a new element before moving on to the next one. It makes the code more simple to read and prevents you from forgetting to configure things.

var list = document.getElementById("itemlist");
var todo = document.getElementById('input');

document.getElementById('button').addEventListener('click', function(){

  var li = document.createElement("li");
  li.textContent = todo.value;
  li.classList.add("container");

  var itemDiv= document.createElement('div');
  var buttonDiv=document.createElement('div');

  var removeBtn = document.createElement("button");
  removeBtn.textContent = 'Remove';
  removeBtn.addEventListener('click', removeItem);
  removeBtn.classList.add('remove');
  
  var completeBtn = document.createElement("button");
  completeBtn.textContent = 'Complete';
  completeBtn.addEventListener('click', completeItem);
  completeBtn.classList.add('complete');

  // Append your items from the inside out
  buttonDiv.appendChild(completeBtn);
  buttonDiv.appendChild(removeBtn);
  itemDiv.appendChild(buttonDiv);
  li.appendChild(itemDiv);

  list.insertBefore(li, list.childNodes[0]);
});


function removeItem() {
  //Just find the closese ancestor that matches the selector and remove it
  this.closest(".container").remove();
};

function completeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};
<header id="addtodo">

  <input type="text" id="input" placeholder="Add an item"/>
  <button id="button"  type="button">Add item</button>
</header>

  <div id="listcontainer">
    <ul id="itemlist">

    </ul>
  </div>

  <div id="dividerline">

  </div>

  <div id="completecontainer">
    <ul id="completed">

    </ul>
  </div>

Microsoft Office Specialist: Excel 2003 Study Guide, You edit and copy macros in your personal workbook the same way you did in select the macro in the list, click the Delete button, and click Yes to confirm. As I said earlier, you can assign macros stored within a workbook to a toolbar Note the two options in the Commands box on the right: one for a Custom Menu Item  If we click the Remove Icon under the details screen of the list, then the list item would be removed, and can't be restored from the recycle bin. The formula used under the remove icon is: Remove('Testing list', BrowseGallery1.Selected); If (IsEmpty(Errors('Testing list', BrowseGallery1.Selected)), Back())

The problem is how you are trying to capture the list item from the parent function. this.parentNode.parentNode grabs the div item that the button is in. call item.parentNode to get the outer list-item object and instead of removing the item from the parent just remove the whole list-item

document.getElementById('button').addEventListener('click', function(e){
	var value = document.getElementById('input').value;

	var item = document.createElement("li");

  var itemText = document.createTextNode(value);

  var itemdiv= document.createElement('div');
  var buttons=document.createElement('div');
  var text=document.createElement('div');

  var remove = document.createElement("button");
  var complete = document.createElement("button");
  var itemlist = document.getElementById('itemlist');

  item.appendChild(itemdiv);
  itemdiv.appendChild(text);
  text.appendChild(itemText);
  itemdiv.appendChild(buttons);
  buttons.appendChild(complete);
  buttons.appendChild(remove);

  remove.innerHTML = 'Remove';
  complete.innerHTML = 'Complete';

  remove.classList.add('remove');
  remove.setAttribute('id','remove');

  complete.classList.add('complete');
  complete.setAttribute('id','complete');

  buttons.classList.add('buttondiv');
  text.classList.add('text');
  itemdiv.classList.add('itemdiv');

  remove.addEventListener('click', removeItem);
  complete.addEventListener('click', completeItem);

  itemlist.insertBefore(item, itemlist.childNodes[0]);
});


function removeItem() {
  var item = this.parentNode.parentNode;
  var parent = item.parentNode;
  parent.remove()
};

function completeItem() {
  var item = this.parentNode.parentNode;
  var parent = item.parentNode;
  
  parent.remove()
};
<header id="addtodo">

  <input type="text" id="input" placeholder="Add an item"/>
  <button id="button"  type="button">Add item</button>
</header>

  <div id="listcontainer">
    <ul id="itemlist">

    </ul>
  </div>

  <div id="dividerline">

  </div>

  <div id="completecontainer">
    <ul id="completed">

    </ul>
  </div>

Add and remove list items - Template tips, Click "Delete list item" in the dialog. Add a row. 1. Add new list items using the "​Add item" button. This tutorial shows how to dynamically add and/or remove items from a list using JavaScript. create new element : We can dynamically create new elements using the document.createElement function. append element : We can append elements using the appendChild function.

Up and Running with AutoCAD 2016: 2D and 3D Drawing and Modeling, As you can see from looking at the list of items in the dialog box, quite a few items are When all the items are purged, there are no more plus signs and the buttons gray out as well. Be careful though, and do not get rid of needed items. Pretty much everything said about blocks applies to wblocks as well, and so this  I need to create or use a library to create a custom HTML <select> to delete each item in the HTML <select>.Something like this: <select> <option value="volvo">Volvo

Up and Running with AutoCAD 2017: 2D and 3D Drawing and Modeling, As you can see from looking at the list of items in the dialog box, quite a few items are When all the items are purged, there are no more plus signs and the buttons gray out as well. Be careful though, and do not get rid of needed items. Pretty much everything said about blocks applies to wblocks as well, and so this  You can use this method to remove a specific item from the list by specifying the index of the item to remove from the list. To specify the item to remove instead of the index to the item, use the Remove method. To remove all items from the list, use the Clear method. If you want to use RemoveAt anyway, you can go backwards, for example with:

Dynamically add and remove element with jQuery, In this post, I show how you can add and remove new element within your Using clicked <span> element id to remove the <div> container. Click on the Add Skill Button to add a new element. Javed Ur Rehman said:. You can use this method to remove a specific item from the list by specifying the index of the item to remove from the list. You can remove selected items from listbox when pressed delete button by using the following code snippet. 1 2

Comments
  • Did you mean item.removeChild(parent)?
  • Also, you don't need to do that at all. Just call .remove() on the item you want to remove from the DOM.
  • ID must be unique your code duplicate them on your buttons remove and complete. and this is very bad!
  • you should have a look at my answer below
  • Please don't post code to 3rd party sites as those links can die over time. Just include a code snippet right here in your answer.