單擊按鈕時刪除表格行

如果單擊刪除行按鈕，表格行將被刪除。單擊按鈕時刪除表格行

如果點擊添加按鈕，新的字段和刪除行按鈕將被添加到表體中。

我面臨的問題是，刪除行按鈕在我的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

，因爲你在$(document).ready ({/*..*/})設置的事件偵聽器.removebtn您遇到的問題時，所以當您刪除行，新按鈕不會有相同的事件監聽器。

將您的刪除功能包裝到函數中，並在調用該函數的每一行上設置onclick屬性。

來源

2016-12-31 08:53:31

單擊按鈕時刪除表格行

回答

相關問題