JavaScript JavaScript and the DOM Making Changes to the DOM Removing Nodes

Joel Greek
Joel Greek
4,421 Points

Here is a solution for removing specific list Item.

I thought it would be fun (and make more sense for a real project) to create for every li that can remove the specific item created, instead of just the last item created. Here is my solution, let me know what you think!

Using the same css as everyone else so just posting the Javascript and HTML. Notice that I deleted the tasks/items/li-elements from the course (for no other reason then that I didn't want them there.). I am also using different names for the variables and the class names.

Javascript:

const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const toggleList = document.querySelector('button.toggleList');
const listDiv = document.querySelector('.list');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');

toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide List';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show List';
    listDiv.style.display = 'none';
  }
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', () => {
  let ulItemList = document.getElementsByClassName('ulItemList')[0];
  let newItem = document.createElement('li');
  newItem.textContent = addItemInput.value;
  ulItemList.appendChild(newItem);
  addItemInput.value = '';

  let deleteItem = document.createElement('button');
  deleteItem.style.marginLeft = '10px';
  deleteItem.textContent = 'X';
  deleteItem.addEventListener('click', () => {
    newItem.parentNode.removeChild(newItem);
  });
  newItem.appendChild(deleteItem);
});

html:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <button class="toggleList">Hide List</button>
    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description" />
      <button class="description">Change list description</button>
      <ul class="ulItemList"></ul>
      <input type="text" class="addItemInput" />
      <button class="addItemButton">Add list item</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

Steven Parker
Steven Parker
195,787 Points

Good job. :+1: But you're getting a bit ahead of things. A later course exercise will have you build a list where each item will have a "remove" button on it.

musab abdi
musab abdi
2,653 Points

solve this https://w.trhou.se/7000qz679f . i want to remove the last item on the list . tell me what is wrong with my code. this is the error am getting when i clicked remove button;

app.js:14 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at HTMLButtonElement.<anonymous> (http://port-80-mzfpq0h79b.treehouse-app.com/app.js:14:18)

Steven Parker
Steven Parker
195,787 Points

Start a fresh question and post your snapshot there. Also provide a link to the course page you are working with.