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

Andrew Lundy
Andrew Lundy
13,269 Points
Posted by Andrew Lundy
Andrew Lundy
13,269 Points

removeChild() is not removing the child!

Hello all!

I've been working on a JS project for my wife and I (and to put on my portfolio), and I've been stuck for a week on one part. When you click the 'edit' button, an input comes up and you put the password in for the account. Hitting 'save' then saves the password.

If you click "Edit" again, the input comes up, but the 'span' does not get removed as it should - instead it just gets pushed to the side of the input; and you get the error 'Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.'

I've tried changing line 54 to 'passwordHeading' as this is the actual parent of the span, but when you click edit, the only thing that happens is the button textContent changes to 'save.' (There is no input where you can enter the password).

Does ANYBODY have any idea on what I can do to get this working? I need to get past this and on to the next part of this app.

https://github.com/andrewlundy/password-book/tree/working

6 Answers

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

No the addAccount function can use variables outside of its scope. I have managed to fix it, here is the code.

It might take you abit of time to get your head around, anymore questions just ask.

const addAccountBtn = document.getElementById('add-account');
const mainContent = document.getElementById('main-content');
const accountName = document.getElementById('account-name');
const passwordHeading = document.createElement('span');


function addAccount() {
  const div = document.createElement('div');
  div.className = 'list-item';
  const heading = document.createElement('h3');
  passwordHeading.textContent = 'Password: ';
  passwordHeading.className = 'password';
  const name = document.createTextNode(accountName.value);
  const edit = document.createElement('button');
  const save = document.createElement('button');
  edit.textContent = 'Edit';
  edit.classList.add('edit-button');
  save.textContent = 'Save';
  save.classList.add('save-button');

  heading.textContent = 'Account: ';

  div.appendChild(heading);
  div.appendChild(passwordHeading);
  div.appendChild(edit);
  div.appendChild(save);

  heading.appendChild(name);
  mainContent.appendChild(div);

  accountName.value = '';
}

addAccountBtn.addEventListener('click', addAccount);

mainContent.addEventListener('click', (e) => {
  const button = e.target;
  const parent = mainContent.firstElementChild.firstElementChild.nextElementSibling;
  const child = mainContent.firstElementChild.firstElementChild.nextElementSibling.lastElementChild;

  if (button.classList.contains('edit-button')) {
    const input = document.createElement('input');
    parent.insertBefore(input, child);
    input.value = child.textContent;
    parent.removeChild(child);

  } else if (button.classList.contains('save-button')) {
    /* Create a span that will contain the input's text content */
    const span = document.createElement('span');
    span.textContent = child.value;
    parent.removeChild(child);
    parent.append(span);
  }
});
tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

'passwordHeading' isn't selecting anything. At the top of your document you are creating a span element and assigning that to the 'passwordHeading' variable. Im working on a solution... i'll reply again soon.

Andrew Lundy
Andrew Lundy
13,269 Points
Andrew Lundy
Andrew Lundy
13,269 Points

And since the eventListener isn't in the scope of the addAccount function, it can't actually use that span that was created right?

Andrew Lundy
Andrew Lundy
13,269 Points
Andrew Lundy
Andrew Lundy
13,269 Points

I understand that the addAccount function can, but the eventListener can't use what was made in addAccount, right? That's what I was asking, sorry!

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

what event listener are you referring to?

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

Then you are correct, that eventListener cant use anything inside addAccount

Andrew Lundy
Andrew Lundy
13,269 Points
Andrew Lundy
Andrew Lundy
13,269 Points

Just realized this works. Until there's more than one account. Working on that now. Thanks for pointing me in the right direction.