亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊 btn jquery 時刪除表 tr

單擊 btn jquery 時刪除表 tr

慕工程0101907 2023-05-19 15:11:38
我正在 jQuery 中創建一個添加和刪除函數,何時minus btn [remove_button]會單擊。但它不起作用。我附加了它的工作td時間plus btn [add_button]以及我如何實現刪除方法。我的代碼在下面,我是 jQuery 的新手,希望如果我錯了,開發人員可以幫助解決這個問題。var maxField = 5;var x = 1;$('.add_button').click(function() {  if (x < maxField) {    x++;    newrow = '<tr class="ok"><td><select class="form-control" name="product_name[]" id="product_id" required><option value="14563">Product 1</option><option value="96547">Product 2</option><option value="965489">Product 3</option></select></td><td><input type="tel" class="form-control" name="quantity[]" placeholder="Enter Quantity" /></td><td><button type="button" class="btn btn-danger remove_button"><i class="fa fa-minus"></i></button></td></tr>';    var rowspan = parseInt($('.field_data').attr('rowspan')) + 1;    $('.field_data').attr('rowspan', rowspan);    $('.complaint_table tr:eq(3)').after(newrow);  }});$(".complaint_table").on("click", ".remove_button", function(e) {  e.preventDefault();  $(this.tr).remove();  x--;});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script><table class="table table-striped table-hover table-bordered complaint_table">  <tbody>    <tr>      <td>Company:</td>      <td>        <input class="form-control" type="text" maxlength="50" placeholder="Company" />      </td>      <td>Company RegDate:</td>      <td>        <input class="form-control" type="date" />      </td>    </tr>
查看完整描述

1 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

問題是因為this在.remove_button點擊處理程序中引用了 DOM 元素。他們沒有tr財產。


而是獲取tr對單擊按鈕的父元素的引用closest():


$(".complaint_table").on("click", ".remove_button", function(e) {

  e.preventDefault();

  $(this).closest('tr').remove();

  x--;

});


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號