jQuery处理来自Ajax响应的表行

Question

我有一个选择下拉菜单，我可以从脚本中显示/删除条件输出（一个除外）。 我遇到的麻烦是删除/删除由$ .each创建的行。 我对js还是陌生的，我已经在网上搜索解决方案，但仍然无法正常工作。 到目前为止，这是我的代码。

<table id="view_programs" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Year</th>
            <th width="12%">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr id="toBeRemoved">
            <td colspan="2">No program selected.</td>
        </tr>   
    </tbody>
</table>

脚本

if(selectedValue == '') {
    $("#delbutton").hide();

    $("#toBeRemoved td").remove();
    $("#toBeRemoved").append(
        $("<td colspan='2'>").html("No program selected.")
    ).appendTo('#view_programs');
}
else {
    $.ajax({
        url: '<?php echo site_url("query.php");?>',
        type: 'post',
        data: {option: selectedValue},
        dataType: 'json',
        success: function(response) {
            $("#delbutton").show().attr("href", "delete/program/"+encodeURIComponent(selectedValue));

            if(jQuery.isEmptyObject(response)) {
                $("#toBeRemoved td").remove();
                $("#toBeRemoved").append(
                    $("<td colspan='2'>").html("No records found.")
                ).appendTo('#view_programs');
            }
            else {
                var trHTML = '';
                $.each(response, function(key, value) {
                    trHTML += "<tr><td>"+value+"</td><td>"+value+"</td></tr>";
                });
                $('#view_programs').append(trHTML);
            }

            console.log(response);
        }
    });
}

更新：实现了我想要的东西，这要感谢西蒙先生为我提供了一些帮助。 我怀疑我的代码会更好，所以我愿意接受任何建议。

改变了这个

<tbody>
    <tr id="toBeRemoved">
        <td colspan="2">No program selected.</td>
    </tr>   
</tbody>

进入这个

<tbody class="toBeRemoved">
    <tr>
        <td colspan="2">No program selected.</td>
    </tr>   
</tbody>

和这个

$('#view_programs').append(trHTML);

进入这个

$('.toBeRemoved').append(trHTML);

并将所有#toBeRemoved更改为.toBeRemoved

Answer 1

您将表格行追加到#view_programs的末尾，这意味着在</tbody>元素之后...因此，它们没有您想删除的#toBeRemoved id呢？

如果要删除多行，请确保使用类（即.toBeRemoved ）而不是ID。 Ids仅是一个元素的唯一标识符。