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 DOM Scripting By Example Adding and Removing Names Removing Names

Michael Williams
PLUS
Michael Williams
Courses Plus Student 8,059 Points
Posted by Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

My Event Listener removes the checkbox and button but not the name, and I'm not sure why. Help?

Here's my code. Not sure what I'm missing. 

const form = document.getElementById("registrar");
const input = form.querySelector("input");
const ul = document.getElementById("invitedList");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = "";
  const li = document.createElement("li");
  li.textContent = text; 
  const label = document.createElement("label");
  label.textContent - "Confirmed";
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  label.appendChild(checkbox);
  li.appendChild(label);

  const button = document.createElement("button");
  button.textContent = "remove";
  label.appendChild(button);

  ul.appendChild(li);
});

ul.addEventListener("change", (e) => {
  const checkbox = event.target;
  checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode; 

  if (checked) {
    listItem.className = "responded";
  } else {
    listItem.className = "";
  }
});

ul.addEventListener("click", (e) => {
  if (e.target.tagName === "BUTTON") {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    ul.removeChild(li);
  }

});

2 Answers

Kim Drezdon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kim Drezdon
Full Stack JavaScript Techdegree Graduate 17,195 Points
Kim Drezdon
.a{fill-rule:evenodd;}techdegree seal-36
Kim Drezdon
Full Stack JavaScript Techdegree Graduate 17,195 Points

I had the same problem. I discovered that when I originally created the button in the submit event handler, I appended it to the label element instead of appending it to the li element.

So where you have: 

const button = document.createElement('button');
button.textContent = 'remove';
label.appendChild(button);

It should be: 

const button = document.createElement('button');
button.textContent = 'remove';
li.appendChild(button);
Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi Michael

Could you send a link to your workspace please, I'd like to see your HTML that you are working with too.

Thanks

Michael Williams
Michael Williams
Courses Plus Student 8,059 Points
Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

Liam Clarke, here you go:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RSVP App</title>
  <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <header>
      <h1>RSVP</h1>
      <p>A Treehouse App</p>
      <form id="registrar">
        <input type="text" name="name" placeholder="Invite Someone">
        <button type="submit" name="submit" value="submit">Submit</button>
      </form>
    </header>

    <div class="main">  
      <h2>Invitees</h2>
      <ul id="invitedList"></ul>    
    </div>
  </div>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>