Help with edit/save button

Question

So when I click the "edit" button it get rids of the checkbox and turns it into the text input . Then when I hit "save" it keeps it in the input box instead of updating it to the list item. I can't find what's wrong with my code. 
ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const button = e.target;
    const li = button.parentNode;
    const ul = li.parentNode;
    if (button.textContent === 'Remove') {
      ul.removeChild(li);
    } else if (button.textContent === 'Edit') {
      const span = li.firstElementChild;
      const input = document.createElement('input');
      input.type = 'text';
      input.value = span.textContent;
      li.insertBefore(input, span);
      li.removeChild(span);
      button.textContent = 'Save';
    } else if (button.textContent === 'Save') {
      const input = li.firstElementChild;
      const span = document.createElement('span')
      span.textContent = input.value;
      li.insertBefore(span, input);
      li.removeChild(input);
      button.textContent = 'Edit';
    }
  }
});

Steven Parker · Accepted Answer

This bit of code seems OK by itself.  But it's hard to understand what "get rids of the checkbox" means since the HTML part of the code isn't shown.  A better way to share your environment is to make a snapshot (https://teamtreehouse.com/library/previews-and-snapshots) of your workspace and post the link to it here.
And when you do need to post code directly, be sure to use Markdown formatting (https://teamtreehouse.com/library/code) to preserve the appearance.

Welcome to the Treehouse Community

Looking to learn something new?

Caleb Hasch

Caleb Hasch

Help with edit/save button

1 Answer

Steven Parker

Steven Parker