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。只有一个元素是唯一标识符。