<div class="container"> <ul id="todo"> <li> <div class="content">things </div><div class="delete">X</div> <div class="clearfix"></div> </li> <li> <div class="content">things </div><div class="delete">X</div> <div class="clearfix"></div> </li> <li> <div class="content">things </div><div class="delete">X</div> <div class="clearfix"></div> </li> </ul> <button id="create">+list</button> </div>
.clearfix {
  clear:both;
}

.container {
  width: 960px;
}
#todo li {
  background-color: #ccc;
  margin:3px 3px;
  line-height: 1.5;
  padding:5px 10px;

}
#todo .content {
  float:left;
}
#todo .delete {
  float:right;
  background-color: darkgray;
  padding:5px 5px;

}
$(document).ready(function(){
  $('#create').click(function(){
    // clone
    var todo = $('#todo').find('li').first().clone();
    // insert @ bottom
    $('#todo').append(todo);
  });
  $('.delete').click(function(e){
      $(e.currentTarget).closest('li').remove();
    });
});
 

See the Pen jquery-todo list by raywang (@raywang1025) on CodePen.

 

第一階段 製作出可增加list的功能,但X的功能不完全

文章標籤

READY sharing 發表在 痞客邦 留言(0) 人氣()