Удаление <tr>из таблицы с помощью jQuery - PullRequest
Новая
       3

Удаление <tr>из таблицы с помощью jQuery

1 голос
/ 06 июня 2019

У меня есть 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" из второй таблицы, она удаляет строку из второй и первой одновременно. Удаляются одинаковые строки с одинаковыми номерами из обеих таблиц. Почему?

Ответы [ 3 ]

3 голосов
/ 06 июня 2019

Во-первых, это недопустимый HTML-код, имеющий несколько элементов с одинаковым id.

Но вы можете значительно упростить свой код, используя мощь 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>
0 голосов
/ 06 июня 2019

Не уверен, что вам нужно много писать.

Вы можете просто сделать это: - 

$(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>
0 голосов
/ 06 июня 2019

Обе кнопки имеют идентификатор 1, меняют идентификатор или вызывают функцию javascript внутри кнопки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...