删除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/