удалите строку таблицы при нажатии кнопки

После нажатия кнопки удаления строки строка таблицы будет удалена.удалите строку таблицы при нажатии кнопки

Новое поле и кнопка удаления строки будут добавлены к телу таблицы, если нажать кнопку добавления.

Проблема, с которой я столкнулся, заключается в том, что кнопка удаления строки работает в моем html, но не в моем javascript. Пожалуйста помоги.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Page 2</title> 
 

 
</head> 
 

 
<body> 
 
    <table id="table"> 
 
    <tbody> 
 
     <tr> 
 
     <td>Field 1 
 
      <input type="text" name="field1"> 
 
     </td> 
 
     <td> 
 

 
      <button class="btn removemebtn">Remove Row!</button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <button class="btn" id="addbtn">Add</button> 
 

 
    <script type="text/javascript"> 
 
    $(document) 
 
     .ready(
 
     function() { 
 
      $('#addbtn') 
 
      .click(
 
       function() { 
 
       $('tbody') 
 
        .append(
 
        '<tr>' + '<td>' + 'Field 2 <input type="text" name="field2">' + '</td>' + '<td>' + '<button class="btn removemebtn">Remove Row!!' + '</button>' + '</td>' 
 

 
        + '</tr>'); 
 
       }); 
 

 
      $('.removemebtn').click(function() { 
 
      $(this).closest('tr').remove(); 
 
      }); 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-12-31 user2211678

Проблема у Вас есть происходит потому, что вы настраиваете приемник событий для .removebtn в $(document).ready ({/*..*/}) так, когда вы убираете строку, новая кнопка не будет иметь тот же слушатель событий.

Включите функцию удаления в функцию и установите атрибут onclick для каждой строки, которая вызывает эту функцию.

источник

2016-12-31 08:53:31

удалите строку таблицы при нажатии кнопки

ответ

Смежные вопросы