Question

我有一个动态创建新行的脚本。在那段代码中，它创建了两个表行。

var $row = $('<tr class="item-row-desc"><td>line</td></tr><tr valign="top" class="item-row"><td width="30"><a class="delete" title="Remove row"><img src="Images/x.png" width="16" height="16" /></a></td><td width="410"><input name="customFieldName" type="text" size="50" id="customFieldName" /><td width="130" align="center"><label for="agent"></label><input type="text" name="agent" id="agent" value="N/A"/> </td></td><td align="center"><input name="customFieldOurCost" type="text"/></td><td width="130" align="center"><input name="customFieldQuantity" type="text" size="10" class="qty" id="customFieldQuantity" /></td><td width="130" align="center"><input name="customFieldPrice" class="cost" type="text" size="10" id="customFieldPrice" /></td><td width="130" align="center"><input type="checkbox" name="GST" checked="checked" class="gst" /></td><td width="130" align="center"><span class="exprice">$00.00</span></td><td width="130" align="center"><span class="incprice">$00.00</span></td></tr>').insertAfter(".item-row:last");

但是，当我点击“删除行”按钮（它在tr中）时，我希望两个s都消失。我只能让第二个消失。为什么不是第一个不来的？

$(document).on('click', '.delete', function() {
                    $(this).parents('.item-row').remove();
                    $(this).parents('.item-row-desc').remove();
                    update_total();
                });

Answer 1

您需要使用

$(document).on('click', '.delete', function () {
    var $tr = $(this).closest('.item-row');
    $tr.prev('.item-row-desc').remove();
    $tr.remove();
    update_total();
});

删除按钮位于item-row元素中，另一行是item-row的上一个兄弟。

所以parents('item-row-desc')不会返回任何内容。您需要找到祖先item-row，然后在删除item-row-desc之后先删除之前的item-row。如果您先删除item-row，那么您将无法找到之前的item-row-desc元素。

jquery删除动态创建行

1 个答案: