Question

我是新的jquery，在我的项目中，行将动态更新。

现在我的问题是当我们点击那行删除按钮时如何删除一行。请帮助我做一些帮助。

<table
        class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
        <thead>
            <tr>
                <th>#</th>
                <th>SiteName</th>
                <th>UserName</th>
                <th>Channel</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="site-table-body">
            <tr>
                <td class="countsiteuser">1</td>
                <td><select class="form-control"><option>www.google.com</option>
                        <option>www.yahoo.com</option>
                        <option>www.flipkart.com</option>
                        <option>www.gamil.com</option></select></td>
                <td><input type="checkbox" value="user" id="checkboxbutton"><input
                    type="text" class="and" placeholder="Default"></td>
                <td><input type="text" class="form-control"
                    placeholder="Enter the Channel"></td>
                <td><span
                    class="form-control glyphicon glyphicon-trash siteUserrow-remover1"></span></td>
            </tr>
            <tr>
                <td class="beer" contenteditable="false">2</td>
                <td><select class="form-control"><option>www.google.com</option>
                        <option>www.yahoo.com</option>
                        <option>www.flipkart.com</option>
                        <option>www.gamil.com</option></select></td>
                <td><input type="checkbox" value="user" id="checkboxbutton"><input
                    type="text" class="and" disabled="" placeholder="Default"></td>
                <td><input type="text" class="form-control"
                    placeholder="Enter the Channel"></td>
                <td><span
                    class="glyphicon glyphicon-trash form-control row-remover"2=""></span></td>
            </tr>
            <tr>
                <td class="beer" contenteditable="false">3</td>
                <td><select class="form-control"><option>www.google.com</option>
                        <option>www.yahoo.com</option>
                        <option>www.flipkart.com</option>
                        <option>www.gamil.com</option></select></td>
                <td><input type="checkbox" value="user" id="checkboxbutton"><input
                    type="text" class="and" disabled="" placeholder="Default"></td>
                <td><input type="text" class="form-control"
                    placeholder="Enter the Channel"></td>
                <td><span
                    class="glyphicon glyphicon-trash form-control row-remover"3=""></span></td>
            </tr>
        </tbody>
    </table>

请提供一些jsfiddle示例。

Answer 1

您可以使用jQuery的<tr>函数找到包含.closest()的内容。这会遍历DOM层次结构，直到找到与提供的选择器匹配的元素。

$('span.glyphicon-trash').on('click', function() {
    $(this).closest('tr').remove();
});

查看此jsFiddle：http://jsfiddle.net/voveson/0vhg0c7m/

请参阅.closest()的文档：here

Answer 2

试试这个fiddle.

$('.row-remover').on('click', function() {
    $(this).closest('tr').remove();
})

Answer 3

看起来类glyphicon-trash是删除行。您可以使用以下查询代码

$(function() {
    $('.glyphicon-trash').on('click', function() {
       // remove the current TR
       $(this).closest('tr').remove();
    });
});

Answer 4

由于行是动态添加的，因此请使用 EVENT DELEGATION ：

$(document).on('click', 'table.tableSiteUser tr td:last', function() {
    $(this).closest('tr').remove();
});

<强> FIDDLE

Answer 5

使用最接近的方法查找tr并使用remove方法删除tr

    $(function () {
        $("body").on('click', '.row-remover', function() {
              $(this).closest('tr').remove();
        });
    });

试试这个fiddle

Answer 6

对所有操作范围使用相同的类名，第一个span使用类'siteUserrow-remover1'和其他span使用行删除器。对用于删除操作的所有范围使用相同的类名

还包括最新的jquery，因为较旧的jquery不支持'on'功能

以下是工作示例：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){    
    $('.row-remover').on('click', function() {
        $(this).closest('tr').remove(); 
    })
});
</script>
<style>
.row-remover{ border:1px solid #ddd;}
</style>
<table
        class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
        <thead>
            <tr>
                <th>#</th>
                <th>SiteName</th>
                <th>UserName</th>
                <th>Channel</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="site-table-body">
            <tr>
                <td class="countsiteuser">1</td>
                <td><select class="form-control"><option>www.google.com</option>
                        <option>www.yahoo.com</option>
                        <option>www.flipkart.com</option>
                        <option>www.gamil.com</option></select></td>
                <td><input type="checkbox" value="user" id="checkboxbutton"><input
                    type="text" class="and" placeholder="Default"></td>
                <td><input type="text" class="form-control"
                    placeholder="Enter the Channel"></td>
                <td><span class="form-control glyphicon glyphicon-trash siteUser row-remover">delete</span></td>
            </tr>
            <tr>
                <td class="beer" contenteditable="false">2</td>
                <td><select class="form-control"><option>www.google.com</option>
                        <option>www.yahoo.com</option>
                        <option>www.flipkart.com</option>
                        <option>www.gamil.com</option></select></td>
                <td><input type="checkbox" value="user" id="checkboxbutton"><input
                    type="text" class="and" disabled="" placeholder="Default"></td>
                <td><input type="text" class="form-control"
                    placeholder="Enter the Channel"></td>
                <td><span  class="glyphicon glyphicon-trash form-control row-remover">delete</span></td>
            </tr>
            <tr>
                <td class="beer" contenteditable="false">3</td>
                <td><select class="form-control"><option>www.google.com</option>
                        <option>www.yahoo.com</option>
                        <option>www.flipkart.com</option>
                        <option>www.gamil.com</option></select></td>
                <td><input type="checkbox" value="user" id="checkboxbutton"><input
                    type="text" class="and" disabled="" placeholder="Default"></td>
                <td><input type="text" class="form-control"
                    placeholder="Enter the Channel"></td>
                <td><span class="glyphicon glyphicon-trash form-control row-remover">delete</span></td>
            </tr>
        </tbody>
    </table>

如何通过单击html表中的行'删除按钮来删除当前行？

6 个答案: