javascript - 如何在此列表中插入 "close"链接

Question

我有这个代码:

// If JS enabled, disable main input
$("#responsibilities").prop('disabled', true);
// $("#responsibilities").addClass("hidden");

// If JS enabled then add fields
$("#resp").append('<input placeholder="Add responsibility" id="resp_input" ></input><input type="button" value="Add" id="add"> ');

// Add items to input field
var eachline='';
$("#add").click(function(){
    var lines = $('#resp_input').val().split('\n');
    var lines2 = $('#responsibilities').val().split('\n');
    if(lines2.length>10)return false;
    for(var i = 0;i < lines.length;i++){
        if(lines[i]!='' && i+lines2.length<11){
        eachline += lines[i] + '\n';
        }    
    }

        $('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li>");

    $('#resp_input').val('');
});    

http://jsfiddle.net/ZTuDJ/40/

我正在尝试将“删除”与添加责任时出现在列表中的每个元素右对齐。这是我试过的代码，但它阻止了 javascript 的工作，而且似乎是糟糕的标记。任何人都可以指出我应该如何完成的正确方向。

JS

$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li><span class="right"><a href="#">Remove</a></span>");

CSS

.right { float: right; }

Answer 1

你的代码由于 " 而变得困惑在<span class="right"><a href="#">Remove</a></span>

因为，除了 LI，你不能在 UL 中添加其他元素，你可以添加你的 remove里边

$('#responsibilities').text($("<div>" + eachline + "</div>").text())
.before("<li>"+$("<p>"+lines+"</p>")
.text()+" : <span class='right'><a href='#'>Remove</a></span></li>");

演示 ---> http://jsfiddle.net/ZTuDJ/42/