Question

在我的代码中删除第一行，但后续行不起作用

html代码：

if

javascript代码：

<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
    <thead>
        <tr>
            <th>#</th>
            <th>User</th>
            <th>Channel</th>
            <th>Action</th>
        </tr>
        <tr>
            <td contentEditable="true">1</td>
            <td contentEditable="true">www.google.com</td>
            <td contentEditable="true">channel-1</td>
            <td contentEditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">delete</span>
            </td>
        </tr>
    </thead>
    <tbody id="site-table-body"></tbody>
</table>

小提琴链接：http://jsfiddle.net/vasantharaj/vkfr2fbo/1/

Answer 1

正在动态创建元素。您需要使用Event Delegation委托事件方法{。}}来使用.on()。

使用

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

DEMO

Answer 2

<td contentEditable="true">
<span class="glyphicon glyphicon-trash form-control row-remover" onclick="js : return deleterow(this);">delete</span>
</td>

<script>
function deleterow(i){
  $(i).closest('tr').remove();
}
</script>

its should be work

Answer 3

以下是未来观众的香草javascript版本

（Demo）

(function () {
    "use strict";
    var tbodies = document.getElementsByTagName('tbody'), tbody;
    for (var i = 0; tbody = tbodies[i]; i++) {
        tbody.addEventListener('click', function (e) {
            if (e.target.className.indexOf('row-remover') >= 0) {
                e.target.parentElement.parentElement.remove();
            }
        }, false);
    }
})();

行删除不起作用

3 个答案: