JavaScript DOM Scripting By Example Adding and Removing Names Removing Names

Michael Williams
PRO
Michael Williams
Pro Student 8,057 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
Kim Drezdon
Full Stack JavaScript Techdegree Student 12,428 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
MOD
Liam Clarke
Treehouse Moderator 19,187 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
Pro Student 8,057 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>