使用 jquery 删除 tr

Question

我创建了一个 table 并想删除带有 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>

js fiddle 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/

使用 jquery 删除 tr

Delete tr using jquery

jquery

html-table

delete-row