javascript - 如何创建像 TodoMvc 示例这样的注释

Question

我想在使用 jQuery Html Css Js 的链接下创建一个像这样的注释表单。 http://todomvc.com/examples/flight/

这是我的html代码：

<form id="myform" action="whatever.php">
    <lable name="text">enter text</label>
    <input id="in" type="text" placeholder="What needs to be done?" />
    <input type="submit" value="Enter" />
</form>

<div class="results">
    <ul class="list">
    </ul>
</div>

这是我的jQuery：

$( document ).ready(function() {
    $('#myform').submit(function(e){
        var val = $(this).find('#in').val();
        $('ul.list').append('<input id="check" type="checkbox"><p>' + val + '</p>');
        e.preventDefault();
    });

    $('ul.list').on("click", "input", function(){
        if( $(this).is(':checked') ) {
            $(this).next('p').css("text-decoration" ,  "line-through");
        } else {
            $(this).next('p').css("text-decoration", "none");
        }
    });
});

我想要：

1. 复选框输入类型和 p 标签在同一行

2. 在每个复选框旁边添加一个删除按钮以删除该注释

3. 一个按钮来选中所有框并取消选中所有