$（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（）;不適用於新元素

回答

相關問題