$（this）.closest（“tr”）。remove（）;不适用于新元素

我一直在与这个问题争斗了一段时间，但由于我没有经验jQuery，我需要一点帮助。

简而言之，我使用按钮来添加和删除表中的行。

我已经设法让这个.on（）事件触发动态生成的元素，但$(this).closest("tr").remove();似乎只有在添加任何其他元素之前为第一个元素工作。在添加新行后停止工作会发生什么？

从我看到使用其他的例子在这里SO是，我使用的是正确的事件代表团...

这里有一个的jsfiddle勾画我这么远：https://jsfiddle.net/vsgvLuam/4/

来源

2016-07-05 Matt Dunne

你的问题是，append（）不能这样工作。检查呈现的HTML标记并检查相关的append（）DOC –

查看代码。附加的新''不在一行内（''） – wmash

Oooh，很好，我会考虑重写附加代码并重试，我会在短时间内回应结果而。 –

这将工作：jsFiddle

除了分别追加行和单元格的，追加一次全部，所以你知道<td>的是行内（<tr>）

来源

2016-07-05 09:32:45 wmash

我接受这个答案是因为它的简单性，因为我现在对'.append（）的工作方式有了更好的理解，并且我可以保持一个很好的干净格式。干杯wmash！ –

没问题@MattDunne。很高兴我能帮上忙：） – wmash

这条线是问题。 append()，不会返回添加的元素，而是返回添加的元素。

$('#printerOptions').find('tbody:last').append('<tr>')

你需要得到新的tr，并追加休息，让列在tr增加。

$('#printerOptions').find('tbody:last').append('<tr>').find('tr:last')

然后添加下一个项目。

DEMO

由于更好的解决方案是使用一个变量，新的tr后来追加，你可以使用this。

来源

2016-07-05 09:28:34 RRK

@Esko否，它不。在您的控制台中试试这个。 '$（'body'）.append（“

Test

”）;' – RRK

嗯，是的，你是对的。 – Esko

尽管这个答案有效并且有效，但在学习了更多关于appends的工作之后，我赞成只写一个'append（）'，但使用''+''来加入我的行。它对我来说看起来更清洁。不过谢谢你的贡献。非常感谢 –

什么我想你的代码：

$("#printerOptions").on("click", ".addOption", function(event) { 
    $('#printerOptions').find('tbody:last').append('<tr><td><button style=" width: 50%;" class="btn btn-primary removeOption">Remove Rule</button></td><td><select style="width: 100%;" autocomplete="off" form="tablequery" name="this[]"><option value="Store ID">Store ID</option><option value="Item Name">Item Name</option><option value="Item Code">Item Code</option><option value="Shipping Type">Shipping Type</option></select></td><td><input style="width: 100%; box-sizing:border-box;" name="that[]" form="tablequery" value=""></td><td><select style="width: 100%;" autocomplete="off" form="tablequery" name="printer[]"><option value="40569">Officejet_Pro_8600</option><option value="40570">_192_168_1_65</option><option value="40571">AdobePDF9</option><option value="142555">_192_168_2_64</option><option value="142556">Pantum_P3000_</option><option value="142621">Oce_ColourWave_700</option><option value="147124">_192_168_1_62</option></select></td></tr>'); 

});

来源

2016-07-05 09:45:02

$（this）.closest（“tr”）。remove（）;不适用于新元素

回答

相关问题