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

solve this https://w.trhou.se/7000qz679f . i want to remove the last item on the list . tell me what is wrong with my co

removing list element using node.remove()

2 Answers

// You should avoid getting the element like this because if you add another ul element before the
// one that you are trying to get, it will end up getting the different ul element and will break your code
// I will post the correct way to get the element below.
let ul=document.getElementsByTagName('ul')[2];
// this would work if you had selected the correct ul element. The above ul element was from your
// nav bar, thus selecting the last li element which happens to be 'Contact'. 
let li = document.querySelector('li:last-child');
  • Here are the changes that I made to your code
// app.js
let input = document.querySelector('.inputSkill');
let button = document.querySelector('.addSkill');
let p = document.querySelector('.musab');

// I moved the ul and button2 variable up here
// Instead of defining the ul element 2 times, you can just define it up here once.
let ul = document.querySelector('ul.skills');
let button2 = document.querySelector('.removeItem');

button.addEventListener('click', ()=>{
// I added this if statement so that it does not add empty or null li elements
  if (input.value !== '' || input.value === null) {
      let li = document.createElement('li');
      li.textContent = input.value;
      ul.appendChild(li);
      input.value= '';
  }
});

// I added an e (event.target), so that we check to if the event.target is an actual button
button2.addEventListener('click', (e)=>{
  // Just in case we are checking to see if event.target is button
  // with the tagName of BUTTON, then if it's true, we remove the lastElementChild from ul
  if (e.target.tagName === 'BUTTON') ul.removeChild(ul.lastElementChild)
   // ul.lastElementChild is the last li element that you want to remove
});
  • I also moved the button so that it is out of the ul element.
<div class="card">
    <h2>Goals</h2>
    <p class="musab">i want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
    <input class="inputSkill">
    <button class="addSkill">add skill</button>
    <ul class="skills">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Ruby</li>
        <li>Rails</li>
    </ul>
    // button moved out of ul element
    // It would be better to have the button out of the ul element
    <button class="removeItem">remove</button>
    <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
</div> 
  • Everything should work fine now.

i appreciate your help