JQuery remove() 不删除元素

Question

我做了一个表格来添加和删除两个文本字段（输入文本和选择）。添加效果很好，但 remove() 不行。

这是一个包含所有必要元素的模板表单，这些元素将由函数 addRow() 添加：

<div class="container-fluid" >
<div class="row data-container">
    <div class="col-md-1 col-sm-1"></div>
        <div class="col-md-10 col-sm-10">
            <div class="col-md-3 col-sm-3">
                text
            </div>
                <div class="col-md-9 col-sm-9">
                <div id="itemRows">
                    <div class="col-xs-5">
                        <input type="text" class="input-txt" placeholder="Heli Kopter">
                    </div>
                    <div class="col-xs-5">
                        <select class="input-txt">
                              <option>Projektijuht</option>
                              <option>Kujundaja</option>
                              <option>Arendaja</option>
                        </select>
                    </div>
                    <div class="col-xs-2"></div>
                </div>
                </div>  
        </div> <!-- /.col-md-10 col-sm-10 -->
    <div class="col-md-1 col-sm-1"></div>
</div>

这是一个模板，我想在其中添加元素。就在 col-md9 col-sm-9 之后：

<div class="container-fluid" >
<div class="row data-container">
    <div class="col-md-1 col-sm-1"></div>
        <div class="col-md-10 col-sm-10">
            <div class="col-md-3 col-sm-3">
                text
            </div>
                <div class="col-md-9 col-sm-9">
                    <input onclick="addRow(this.form);" type="button" value="Add row" />
                </div>
        </div>
    <div class="col-md-1 col-sm-1"></div>
</div>

这是 jquery 源。 addRow 效果很好，但是 remove 功能不起作用：

    var rowNum = 0;

    function addRow(frm) {
        rowNum++;
        var row = '<p id="rowNum' + rowNum + '"><div class="col-xs-5" style="background-color:red;"><input type="text" class="input-txt" placeholder="Heli Kopter"></div><div class="col-xs-5" style="background-color:yellow;"><select class="input-txt"><option>Projektijuht</option><option>Kujundaja</option><option>Arendaja</option></select></div><div class="col-xs-2" style="background-color:red;"><input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"/></div> </p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }

    function removeRow(rnum) {
        /* $("p:last-child").remove(); */
        jQuery('#rowNum' + rnum).remove();
    }

你能帮我修理一下吗？ 谢谢！

Answer 1

将addRow 函数更改为：

function addRow(frm) {
    rowNum++;
    var row = '<div id="rowNum' + rowNum + '"><div class="col-xs-5" style="background-color:red;"><input type="text" class="input-txt" placeholder="Heli Kopter"></div><div class="col-xs-5" style="background-color:yellow;"><select class="input-txt"><option>Projektijuht</option><option>Kujundaja</option><option>Arendaja</option></select></div><div class="col-xs-2" style="background-color:red;"><input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"/></div> </div>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

问题正如评论中提到的那样，<p> 无法包装<div>，因此<p> 立即关闭。这是一个小提琴：http://jsfiddle.net/M4U5F/