javascript - 如何使用 jQuery 删除 html 表格中选定的行？

Question

我正在尝试使用 jQuery 删除表中选定的行。

这是我的 html 标记:

<table id="resultTable">
 <tr id="first">
  <td>c1</td>      
  <td>c2</td>      
 </tr>
 <tr id="second">
  <td>c3</td>      
  <td>c4</td>      
  </tr>    
</table>
<button id="del">Clear</button>

这是我正在使用的脚本..

<script>
$(document).ready(function () {   
     var tid="";   

     $('#resultTable tr').click(function (event) {
        tid=$(this).attr('id');
          alert(tid); //trying to alert id of the clicked row   
     });

     $("#del").click(function(){
     alert("removing "+ tid);
            $(tid).remove();    
     });
 });
</script>

我声明一个全局变量“tid”来获取“rowId”，并在两个 click() 函数中使用相同的变量。但我无法删除相应的行，请帮助我

Answer 1

连接 #使其有效 ID选择器，无 # ，jQuery 将查找 <first>/<second>元素

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
  });
  $("#del").click(function() {
    console.log(tid);
    if ($('#' + tid).length) {
      $('#' + tid).remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="resultTable">
  <tr id="first">
    <td>c1</td>
    <td>c2</td>
  </tr>
  <tr id="second">
    <td>c3</td>
    <td>c4</td>
  </tr>
</table>
<button id="del">Clear</button>