Question

我有2个表，并且每一行都有自己的用于删除自身的按钮：

 <table class="table" id="Offers">
       <tr id="row1">
        <td><button type="button" id=1 class="removeOffer">X</button</td>
       </tr>   
 </table>

 <table class="table" id="OffersHistory">
       <tr class="History1">
        <td><button type="button" id=1 class="removeOfferHistory">X</button</td>
      </tr>   
 </table>

对于每个表，还有两个简单的JQuery代码，用于删除：

   $(document).on('click', '.removeOffer', function(){
        var button_id = $(this).attr("id");
        $('#row'+button_id).remove();
   });

    $(document).on('click', '.removeOfferHistory', function(){
        var button_id = $(this).attr("id");
        $('.History'+button_id).remove();
    });

当我单击第一个表格中的“ X”按钮时，它工作正常。第一个表中的行已删除...但是，当我单击第二个表中的“ X”按钮时，它将同时从第二个表和第一个表中删除行。从两个表中删除具有相同编号的同一行。为什么？

Answer 1

首先，包含多个具有相同id的元素是无效的HTML。

但是，您可以使用jQuery的功能来大大简化代码。

$(function(){
  $("button").on("click", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>First Row</td>
    <td><button>X</button></td>
  </tr>   
  <tr>
    <td>Second Row</td>
    <td><button>X</button></td>
  </tr>   
</table>

Answer 2

两个按钮的ID均为1，更改ID或调用按钮内的javascript函数

Answer 3

不确定您需要做很多这样的编码。

您可以通过：-

$(document).ready(function() {
  $('button').click(function() {
     $(this).remove(); 
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Remove button</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <button class="first" value="button1">button1</button>
    <button class="first" value="button1">button2</button>
    
</body>
</html>

使用jQuery从表中删除<tr>

3 个答案: