刪除tr使用jquery

Question

我已經創建了一個表，並希望刪除與jquery的行。

我到處尋找，我無法弄清楚我做錯了什麼。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 

 
$(document).ready(function() { 
 
    $("#ao-referrer-summary").on('click', '.btnDelete', function() { 
 
     $(this).closest('tr').remove(); 
 
    }); 
 
}); 
 
</script>

<table id="ao-referrer-summary"> 
 
    <thead> 
 
     <tr> 
 
      <th>Referrer First Name</th> 
 
      <th>Referrer Last Name</th> 
 
      <th>Delete User</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>%%FNAME%%</td> 
 
      <td>%%LNAME%%</td> 
 
      <td> 
 
       <button class="btnDelete">&times;</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>%%FNAME%%</td> 
 
      <td>%%LNAME%%</td> 
 
      <td> 
 
       <button class="btnDelete">&times;</button> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

爵士小提琴 http://jsfiddle.net/designstreet1/4pvrtghu/

Answer 1

你的代碼工作只需要加載jQuery library，使其工作。選擇左上角下拉列表中的jquery庫。那就是如何使用JSFIDDLE。在此之後，你很高興去交配。見下圖：

如果你正在使用的代碼片段，這裏的部分包括庫：

工作DEMO

Answer 2

$(document).ready(function() { 
 
    $("#ao-referrer-summary").on('click', '.btnDelete', function() { 
 
     $(this).closest('tr').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="ao-referrer-summary"> 
 
    <thead> 
 
     <tr> 
 
      <th>Referrer First Name</th> 
 
      <th>Referrer Last Name</th> 
 
      <th>Delete User</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>%%FNAME%%</td> 
 
      <td>%%LNAME%%</td> 
 
      <td> 
 
       <button class="btnDelete">&times;</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>%%FNAME%%</td> 
 
      <td>%%LNAME%%</td> 
 
      <td> 
 
       <button class="btnDelete">&times;</button> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

問題是腳本丟失。代碼是好的

Answer 3

你只需要包括jQuery庫，以使您的js代碼工作。

$(document).ready(function() { 
 
    $("#ao-referrer-summary").on('click', '.btnDelete', function() { 
 
     $(this).closest('tr').remove(); 
 
    }); 
 
});

<table id="ao-referrer-summary"> 
 
    <thead> 
 
     <tr> 
 
      <th>Referrer First Name</th> 
 
      <th>Referrer Last Name</th> 
 
      <th>Delete User</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>%%FNAME%%</td> 
 
      <td>%%LNAME%%</td> 
 
      <td> 
 
       <button class="btnDelete">&times;</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>%%FNAME%%</td> 
 
      <td>%%LNAME%%</td> 
 
      <td> 
 
       <button class="btnDelete">&times;</button> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

http://jsfiddle.net/4pvrtghu/2/