動態添加和刪除表格行

我使用jQuery添加和刪除表格行。我可以輕鬆添加行，但無法刪除已創建的行。動態添加和刪除表格行

您可以在此處查看頁面的操作：http://freshbaby.com/v20/wic/request_quote.cfm，粘貼下面的相關代碼。

HTML

<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase"> 
    <thead valign="top" align="left"> 
     <tr> 
      <th>Products</th> 
      <th>Language</th> 
      <th>Quantity</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody valign="top" align="left"> 
     <tr> 
      <td> 
       <cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below"> 
        <option value=""></option> 
       </cfselect> 
      </td> 
      <td> 
       <select name="language" size="1"> 
        <option value="English">English</option> 
        <option value="Spanish">Spanish</option> 
       </select> 
      </td> 
      <td> 
       <cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999"> 
      </td> 
      <td valign="bottom"><a href="javascript://" class="addrow">Add Another Product</a></td> 
     </tr> 
    </tbody> 
</table>

的JavaScript：

<script> 
     $(function() { 
      var i = 1; 
      $(".addrow").click(function() { 
       $("table#product-list tbody > tr:first").clone().find("input").each(function() { 
        $(this).attr({ 
         'id': function(_, id) { return id + i }, 
         'value': ''    
        }); 
       }).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product') 
       .end().appendTo("table#product-list tbody"); 
       i++; 
       return false; 
      }); 

      $("a.removerow").click(function() { 
        //This should traverse up to the parent TR 
       $(this).parent().parent().remove(); 
       return false; 
      }); 
     }); 
    </script>

當我點擊鏈接，刪除上述鏈路包含在該行，什麼都不會發生。沒有腳本錯誤，所以它必須是邏輯。

來源

2013-02-27 Angry Spartan

嘗試使用'$（this）.closest（'tr'）。remove（）;'而不是。如果這不起作用，請嘗試使用'e.preventDefault（）;'而不是'return false;'，但將其放在函數的頂部。 – slamborne 2013-02-27 03:29:03

我認爲它會工作 – PSR 2013-02-27 03:29:39

它不;看看爲什麼在下面的答案。 – 2013-02-27 12:57:05

試試這個

$("#product-list").on('click','a.removerow',function(e) { 
    e.preventDefault(); 
    //This should traverse up to the parent TR 
    $(this).closest('tr').remove(); 
    return false; 
});

這將確保新創建的元素可以被刪除。當您使用$("a.removerow").click(..時，它只會影響存在的元素（無），而不會影響將動態創建的元素。

來源

2013-02-27 03:35:25 Moak

好的答案，我學到了一些關於不存在的元素互動的新東西。精彩！ – 2013-02-27 12:56:44

動態添加和刪除表格行

回答

相關問題