Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Help! I need to append a remove button to each list item!

Every time an item is added I want a remove button to be beside it and when clicked it removes that specific list item! But it isn't working...

// TODO: Rating system
let code;
let jobEntered;
let item;
let user;
let qAdd;
let amount;
let job;
let message = "";
let name;
let employee;
let conf;
var i;
const print = (message) => {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
const getReport = (employee) => {

  let report = `<h1 class="name" id="name"> ${employee.name} </h1>`;
  `<ol>`
  report += `<li class="cups" id="cupsSold"> Cups Sold: ${employee.cupsSold} </li>`;
  report += `<li class="baked" id="bakedGoodsSold"> Baked Goods Sold: ${employee.bakedGoodsSold} </li>`;
  report += `<li class="rating" id="rating"> Rating: ${employee.rating} </li>`;
  report += `<li class="serveys" id="serveysSold">Serveys Sold: ${employee.surveys} </li>`;
  report += `<li class="notCollected" id="notCollected">Amount Not collected: ${employee.amountEarned}</li>`;
  report += `<li class="mistakes" id="mistakes">Mistakes: ${employee.mistakesMade}</li>`;
  `</ol>`
  return report;
};

const mistakes = document.getElementById('mistakes');
const notCollected = document.getElementById('notCollected');
const serveysSold = document.getElementById('serveysSold');
const bakedGoods = document.getElementById('bakedGoodsSold');
const cupsSold = document.getElementById('cupsSold');
const data = document.getElementById('data');
const julie = document.getElementById('julieReport');
const luke = document.getElementById('lukeReport');
const brendon = document.getElementById('brendonReport');
const company = document.getElementById('company');
const jobCode = document.getElementById('jobCode');
const jobsCompleted = document.getElementById('jobsCompleted')
const toggle = document.querySelector('.earn');
const text = document.getElementById('text');
const addNotes = document.getElementById('addNotes');
const noteList = document.getElementById('noteTitle');
const parent = document.getElementById('parent');
const rating = document.getElementById('rating');
const remove = document.querySelector('.removeNotes');

//This adds the notes
addNotes.addEventListener('click', () => {
  let ul = document.getElementById('parent');
  let li = document.createElement("li");
  ul.appendChild(li);
  removeNotes(li);
  li.className = 'notesTaken';
  li.textContent = text.value;
  text.value = '';
});
//This function removes the notes
function removeNotes(li) {
  let removeButton = document.createElement("button");
  removeButton.className = 'removeNotes';
  removeButton.textContent = 'remove';
  li.appendChild(removeButton);
}

remove.addEventListener('click', () => {
  let ul = parent;
  let li = parent.children;
  ul.removeChild(li);
});


//Employees report function
julie.addEventListener('click', () => {
  var i = 0;
  message = getReport(employees[0]);
  print(message);
});
luke.addEventListener('click', () => {
  var i = 1;
  message = getReport(employees[1]);
  print(message);
});
brendon.addEventListener('click', () => {
  var i = 2;
  message = getReport(employees[2]);
  print(message);
});

//questions and answers
jobCode.addEventListener("click", () => {
  item = prompt("What's the item?");
  if (item === "small lemonade") {
    alert("That costs $1.50");
  } else if (item === "large lemonade") {
    alert("This costs $2");
  } else if (item === "small cookie") {
    alert("75cents per cookie");
  } else if (item === "large cookie") {
    alert("$1.50 per large cookie");
  } else if (item === "small pink lemonade") {
    alert("$1.50");
  } else if (item === "large pink lemonade") {
    alert("$2 per cup");
  } else if (item === "special lemonade") {
    alert("$3 per cup");
  } else if (item === "ice") {
    alert("Free, give them 1 scoop");
  } else if (item === "straws") {
    alert("Only ask woman if they want one. Let them grab it if possible");
  } else if (item === "survey") {
    alert("Ask everyone if they would like to take it...after they do then put it in the folder");
  } else if (item === "setup") {
    alert("Once you reach the stop sign first, setup the table. Then, the lemonade jugs. Then, get sign out. Then, cooler for chair. Leave everything else secured in wagon");
  } else if (item === "cleanup") {
    alert("First, put up cooler. Second, jugs and other small items. Lastly table");
  } else if (item === "spill") {
    alert("If you spill a cup or drop something on ground make sure to throw it out and give them a new one. Make sure to log what you did");
  } else if (item === "sold out") {
    alert("If you sell out just follow the cleanup procedures and clock out");
  } else if (item === "my item") {
    alert("You get %75 of profit if you are there selling");
  } else if (item === "brendons") {
    alert("If you are selling you get %40 profit");
  } else if (item === "greeting") {
    alert("Say hi, what would you like? Then name everything we have.");
  } else if (item === "sale") {
    alert("Thank-you for coming! Hope you enjoy");
  } else if (item === "card") {
    alert("Give customer our card and ask them to email me if they want to know when we will be open");
  } else {
    alert("Try something else or retype");
  }
});

//The rating system
if (cupsSold > 10) {
  rating.textContent += 1;
}

Hi, try taking removeNotes(li); out of the //This adds the notes section. Let me know if it does't work.

gmarrero... it didn't work

// TODO: Rating system
let code;
let jobEntered;
let item;
let user;
let qAdd;
let amount;
let job;
let message = "";
let name;
let employee;
let conf;
var i;
const print = (message) => {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
const getReport = (employee) => {

  let report = `<h1 class="name" id="name"> ${employee.name} </h1>`;
  `<ol>`
  report += `<li class="cups" id="cupsSold"> Cups Sold: ${employee.cupsSold} </li>`;
  report += `<li class="baked" id="bakedGoodsSold"> Baked Goods Sold: ${employee.bakedGoodsSold} </li>`;
  report += `<li class="rating" id="rating"> Rating: ${employee.rating} </li>`;
  report += `<li class="serveys" id="serveysSold">Serveys Sold: ${employee.surveys} </li>`;
  report += `<li class="notCollected" id="notCollected">Amount Not collected: ${employee.amountEarned}</li>`;
  report += `<li class="mistakes" id="mistakes">Mistakes: ${employee.mistakesMade}</li>`;
  `</ol>`
  return report;
};

function removeNotes(li) {
  let removeButton = document.createElement("button");
  removeButton.className = 'removeNotes';
  removeButton.textContent = 'remove';
  li.appendChild(removeButton);
}

const mistakes = document.getElementById('mistakes');
const notCollected = document.getElementById('notCollected');
const serveysSold = document.getElementById('serveysSold');
const bakedGoods = document.getElementById('bakedGoodsSold');
const cupsSold = document.getElementById('cupsSold');
const data = document.getElementById('data');
const julie = document.getElementById('julieReport');
const luke = document.getElementById('lukeReport');
const brendon = document.getElementById('brendonReport');
const company = document.getElementById('company');
const jobCode = document.getElementById('jobCode');
const jobsCompleted = document.getElementById('jobsCompleted')
const toggle = document.querySelector('.earn');
const text = document.getElementById('text');
const addNotes = document.getElementById('addNotes');
const noteList = document.getElementById('noteTitle');
const parent = document.getElementById('parent');
const rating = document.getElementById('rating');
const remove = document.querySelector('.removeNotes');

//This adds the notes
addNotes.addEventListener('click', () => {
  let ul = document.getElementById('parent');
  let li = document.createElement("li");
  ul.appendChild(li);
  removeNotes(li);
  li.className = 'notesTaken';
  li.textContent = text.value;
  text.value = '';
});
//This function removes the notes
remove.addEventListener('click', () => {
  let ul = parent;
  let li = parent.children;
  ul.removeChild(li);
});

//Employees report function
julie.addEventListener('click', () => {
  var i = 0;
  message = getReport(employees[0]);
  print(message);
});
luke.addEventListener('click', () => {
  var i = 1;
  message = getReport(employees[1]);
  print(message);
});
brendon.addEventListener('click', () => {
  var i = 2;
  message = getReport(employees[2]);
  print(message);
});

//questions and answers
jobCode.addEventListener("click", () => {
  item = prompt("What's the item?");
  if (item === "small lemonade") {
    alert("That costs $1.50");
  } else if (item === "large lemonade") {
    alert("This costs $2");
  } else if (item === "small cookie") {
    alert("75cents per cookie");
  } else if (item === "large cookie") {
    alert("$1.50 per large cookie");
  } else if (item === "small pink lemonade") {
    alert("$1.50");
  } else if (item === "large pink lemonade") {
    alert("$2 per cup");
  } else if (item === "special lemonade") {
    alert("$3 per cup");
  } else if (item === "ice") {
    alert("Free, give them 1 scoop");
  } else if (item === "straws") {
    alert("Only ask woman if they want one. Let them grab it if possible");
  } else if (item === "survey") {
    alert("Ask everyone if they would like to take it...after they do then put it in the folder");
  } else if (item === "setup") {
    alert("Once you reach the stop sign first, setup the table. Then, the lemonade jugs. Then, get sign out. Then, cooler for chair. Leave everything else secured in wagon");
  } else if (item === "cleanup") {
    alert("First, put up cooler. Second, jugs and other small items. Lastly table");
  } else if (item === "spill") {
    alert("If you spill a cup or drop something on ground make sure to throw it out and give them a new one. Make sure to log what you did");
  } else if (item === "sold out") {
    alert("If you sell out just follow the cleanup procedures and clock out");
  } else if (item === "my item") {
    alert("You get %75 of profit if you are there selling");
  } else if (item === "brendons") {
    alert("If you are selling you get %40 profit");
  } else if (item === "greeting") {
    alert("Say hi, what would you like? Then name everything we have.");
  } else if (item === "sale") {
    alert("Thank-you for coming! Hope you enjoy");
  } else if (item === "card") {
    alert("Give customer our card and ask them to email me if they want to know when we will be open");
  } else {
    alert("Try something else or retype");
  }
});

//The rating system
if (cupsSold > 10) {
  rating.textContent += 1;
}

1 Answer

Steven Parker
Steven Parker
242,296 Points

This is a bit of a guess since you didn't provide the rest of the code (the HTML part). But your "removenotes" function adds a button but does not attach a listener to it to react to clicks.

You could add something like this to the end of that function:

  removeButton.addEventListener('click', e => e.target.parentNode.remove());

You could also create a single delegated handler to perform this function for all the buttons.

Always provide the complete code to facilitate the most specific and accurate answers. If you're using the workspaces, you can make a snapshot of your workspace and post the link to it here.

I added a listener "remove.addEventListener" the thing is the button doesn't even appear on the page. Heres the html but it's not much

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Lukes Lemons</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="wrapper">
    <header>
      <h1 class="logo" id="logo"><a href="#" target="_blank">Luke's Lemons</a></h1>
      <h2 class="notes" id="noteTitle">Take notes</h2>

      <input type="text" name="notes" id="text" class="text">
      <button id="julieReport" class="summary">Julie</button>
      <button id="lukeReport" class="summary">Luke</button>
      <button id="brendonReport" class="summary">Brendon</button>
      <button id="company" class="summary">Calculator</button>
      <button id="jobCode" class="jobCode">Questions</button>
      <button id="addNotes" class="addNotes">Add Notes</button>
    </header>
    <div>
<ul id="parent">

</ul>

    </div>

    <footer class="bottom">

    </footer>
    <div id="output"></div>
    <script src="web.js"></script>
    <script src="employee.js"></script>
    <script src="user.js"></script>


  </div>
</body>

</html>
Steven Parker
Steven Parker
242,296 Points

When you replace an element's html or textContent, it destroys any children that element may have. So in the click event handler, you should move the call to "removeNotes" so that it is below the line that assigns the textContent.

ok so I moved to function call, but in the console it says that my addeventlistener is null?

addNotes.addEventListener('click', () => {
  let ul = document.getElementById('parent');
  let li = document.createElement("li");
  ul.appendChild(li);
  li.className = 'notesTaken';
  li.textContent = text.value;
  text.value = '';
  removeNotes(li);
});
//This function removes the notes
remove.addEventListener('click', () => {
  let ul = parent;
  let li = parent.children;
  ul.removeChild(li);
});
Steven Parker
Steven Parker
242,296 Points

Looks like you've changed something. In the original code, the "removeNotes" function was below the comment that said "//This function removes the notes":

//This function removes the notes
function removeNotes(li) {
  let removeButton = document.createElement("button");
  removeButton.className = 'removeNotes';
  removeButton.textContent = 'remove';
  li.appendChild(removeButton);
  removeButton.addEventListener('click', e => e.target.parentNode.remove()); // <- my suggestion
}

The code below that comment line now doesn't appear to do anything useful. It seems to be trying to add a click handler to a non-exsiting element. You can probably remove it.