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

Posted by Ashish Mehra
Ashish Mehra
Courses Plus Student 103 Points

this.parentNode 

var incompleteTasks = function(){
     console.log('Incomplete Task');
  //append list items of parent node to incomplete tasks
  var listItems = this.parentNode; 
  incomplete.appendChild(listItems);

  setEvent(listItems,completedTasks);
}


 var setEvent = function(liItems,checkboxHandler){
           console.log('Access');
        //here we're going to use query selector to access particular item we want to access
            var checkbox = liItems.querySelector('input[type=checkbox]');
            var delt = liItems.querySelector('button.delete');
            var edit = liItems.querySelector('button.edit');

        //assigning handler

            checkbox.onchange = checkboxHandler;
            delt.onclick=deleteTasks;
            edit.onclick=editTasks;
      }


//looping under incomplete-tasks

 for(var i=0;i<incomplete.children.length;i++){

   setEvent(incomplete.children[i],completedTasks);

 }

    //looping under completed-asks

 for(var i=0;i<complete.children.length;i++){

    setEvent(complete.children[i],incompleteTasks);

 }

 <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

      </ul>

      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
    </div>

what actually i m accessing through this.parentNode the items under the list or complete list ?

1 Answer

Afrid Mondal
Afrid Mondal
6,255 Points

'this' means the element you are in or clicking something and 'this.parentNode' means you are traversing from your current element of it's parent container.

Chyno Deluxe
Chyno Deluxe
16,936 Points

//Changed comment to answer