Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

what is wrong with my code?? Javascript DOM

What is wrong with my code? I created 2 ul's and I was able to add and remove items in the first list. I decided I wanted to make another one, and now I cant remove items from the second list but I can add items into it.

On the console log it says:

"Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLButtonElement.removeItemButton.addEventListener"

HTML

<div class="secondDiv">
        <h1>Second Box</h1>
        <ul class="secondList">
            <li>Lorem, ipsum dolor5.</li>
            <li>Lorem, ipsum dolor6.</li>
            <li>Lorem, ipsum dolor7.</li>
            <li>Lorem, ipsum dolor8.</li>
            <li>Lorem, ipsum dolor9.</li>
            <li>Lorem, ipsum dolor10.</li>
        </ul>
    </div>
    <input type="text" class="secondInput">
    <br>
    <br>
    <button class="secondAdd">Add An Item</button>
    <br>
    <br>
    <button class="secondRemove">Remove An Item</button>

JAVASCRIPT

const addItemInput = document.querySelector('input.secondInput')
const addItemButton = document.querySelector('button.secondAdd')
const removeItemButton = document.querySelector('button.secondRemove')

addItemButton.addEventListener('click', () => {
    let ul = document.querySelector('ul.secondList')
    let li = document.createElement('li')
    li.textContent = addItemInput.value
    ul.appendChild(li)
    addItemInput.value = ''
})


removeItemButton.addEventListener('click', () => {
    let ul = document.querySelector('ul.secondList')
    let li = document.querySelector('li.secondList')
    ul.removeChild(li)
})

2 Answers

Shay Paustovsky
Shay Paustovsky
969 Points

Hi Timothy,

Firstly, let me say that I'm no fan of selecting DOM elements inside EventListeners because of scope problems.

Secondly, The (li) elements you're selecting with li.secondList, it is incorrect because the list items do not have the class 'secondList'.

const firstList = document.querySelector('.firstList');
const secondList = document.querySelector('.secondList');
const buttonAdd = document.querySelector('.add');
const buttonRemove = document.querySelector('.remove');
const inputValue = document.querySelector('.inputValue');

buttonAdd.addEventListener('click', () => {
    let li = document.createElement('li');
    li.textContent = inputValue.value;
    firstList.appendChild(li);
  }
    );

buttonRemove.addEventListener('click', () => {
    let li = firstList.querySelector('li:last-child');
    firstList.removeChild(li);

This is a reference from my code :

  1. Because I have selected the <ul> with the class .firstList and stored it in the variable I'm simply accessing the last child of the 'li' element

Hopefully this helped,

Shay

Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

Hi Shay, Thanks for the reply! i got it now. I also find this course of JS a bit confusing and complicated. But a lot of people suggested to just push through it because what awaits me...... JQuery is going to make things 10 times easier.. Is that correct? Shay Paustovsky

Shay Paustovsky
Shay Paustovsky
969 Points

Hi Timothy,

I haven't reached jQuery yet, but when learning how to code it is pretty obvious it won't be easy and some roadblocks would be met, but again that's the fun part.

Happy I could help

Shay