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


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"


<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>
    <input type="text" class="secondInput">
    <button class="secondAdd">Add An Item</button>
    <button class="secondRemove">Remove An Item</button>


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
    addItemInput.value = ''

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

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;

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

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,


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