1 of 3

Th 3/14 AIM: How do we add & remove elements from the DOM?

HW: nothing new!

  • Decide on driver/navigator
  • c9 > jquery > duplicate template > list.html
    • Feel free to copy/paste the html inside <body></body>
  • Get the result to match jsbin.com/tudiki/edit
    • Task 1: add the item to the list when the “add” button is pressed
    • Task 2: make the item go away when it is double-clicked
    • Task 3: make the input clear/focus when you press add
    • Extension: make the list sortable (i.e. drag to reorder)

​

2 of 3

List: Debugging

Pair Programming Mode

$(function(){� � $('button').click(function(){� var userInput = $('input').val();� $('ul').append("<li>"+userInput+"</li>");� $('input').val("").focus();� });�� $('li').dblclick(function(){� $(this).remove();� });� �});

There's a problem with this code.

​

What is it?

3 of 3

Summary

Here is the solution to the List.

​

HW#10 (due F 3/15, 8:00am): jQuery Summary

  • This will count for 2 homeworks!
  • It is on Google Classroom
  • Make sure you press Turn In