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效果很好，但删除功能不起作用：

    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/

JQuery remove（）不会删除元素

1 个答案: