javascript - 如何从输入框中提取文本并将它们添加到底部的 div

Question

我有一小段 html，它有两个输入框和一个带有按钮添加的复选框，如下所示:

<div class="row">
            <div class="form-group col-xs-4">
                <input type="text" class="form-control" id="items" name="items" placeholder="Enter item description">
            </div>
            <div class="form-group col-xs-3">
                <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
            </div>
            <div class="form-group">
                <div class="form-group col-xs-3">
                    <div class="form-group">
                        <div class="checkbox">
                            <input type="checkbox" id="in-order" name="in-order">
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-2">
                    <div class="btn btn-primary" id="add-btn">Add</div>
                </div>
            </div>
        </div>

     <div id="persisted-items"></div>

我想提取输入到文本框中的数据，然后单击“添加”按钮将其添加到底部 div“persisted-items”的一行中。另外，我想在旁边连续添加一个小图标或链接“删除”，以便在单击时删除它。

我尝试使用表格行来试验相同类型的场景，但无法更进一步。

我做了类似下面的事情来提取信息并添加到 div.:

$('#add-btn').click(function(){
  $("#persisted-items").append($("#items").val());
  $("#persisted-items").append($("#quantity").val());
  $("#persisted-items").append($("#in-order").val());
});

请帮忙，

谢谢。

Answer 1

这是一个 jsfiddle:http://jsfiddle.net/k35x4pz5/显示信息并删除它们。

我添加了一个删除节点的函数:

function removeNode(nodeId) {
    document.getElementById("item"+nodeId).remove(); 
};

并且，当您显示来自用户的数据时，我添加了此方法的调用:

var counter = 0;
$('#add-btn').click(function(){
    $("#persisted-items").append("<div id='item"+counter+"'><span onclick='removeNode("+counter+")'>[ delete ]</span> "+  $("#items").val() + " - " + $("#quantity").val() + " - " + $("#in-order").val() +" </div>");
    counter++;
});