JQuery remove()不会删除元素

时间:2014-02-10 09:47:22

标签: jquery

我做了一个表单,用于添加和删除两个文本字段(输入文本和选择)。添加效果很好,但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效果很好,但删除功能不起作用:

    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();
    }
你可以帮我修理一下吗? 谢谢!

1 个答案:

答案 0 :(得分:0)

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/