Ray

<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的功能，但Ｘ的功能不完全