Javascript 如何隐藏整个表行<；tr>；在jQuery中？

我有一个很大的数据表。作为参考，我在下面只打印了两条记录的HTML：

<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
    <tr class="evenRow">
        <th width="33%" style="text-align:center;" class="question-id">Que ID</th>
        <th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
        <th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
    </tr> 
    <tr class="oddRow">
        <td class="question-id" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51550,51545#searchPopContent" title="View question" class="inline_view_question_detail">QUE51550</a>
        </td>
        <td class="question" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51550,51545#searchPopContent" title="View question" class="inline_view_question_detail">QUE51545</a>              
            <a href="#deletePopContent" class="c-icn c-remove delete_question" delhref="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=delete&question_id=51545&subject_id=2&topic_id=464" title="Delete question"> Delete</a>              
        </td>
        <td class="question" align="center" valign="top">
            90.84<br />
        </td>
    </tr>
    <tr class="oddRow">
        <td class="question-id" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51589,51393#searchPopContent" title="View question" class="inline_view_question_detail">QUE51589</a>    
        </td>
        <td class="question" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51589,51393#searchPopContent" title="View question" class="inline_view_question_detail">QUE51393</a>              
            <a href="#deletePopContent" class="c-icn c-remove delete_question" delhref="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=delete&question_id=51393&subject_id=2&topic_id=464" title="Delete question"> Delete</a>              
        </td>
        <td class="question" align="center" valign="top">
            91.80<br />
        </td>
    </tr>
</table>

奎因
匹配Que ID
百分比（%）
90.84

91.80

现在，如果我想在用户单击该行的删除图标时隐藏相应的整行，我应该如何使用jQuery实现这一点？

用于查找第一个匹配的父级

$('.delete_question').on('click', function(){
    $(this).closest('tr').hide();
    // any other code, e.g. some ajax here
});

您可能还希望阻止默认的单击事件（设置为转到#deletePopContent）

---

试试这个：

$(".delete_question").click(function(){
  $(this).parents('tr').hide();
})

试试这个

$(".delete_question").click(function(){
  $(this).parents('tr:first').hide();
});

---

这对嵌套表也很有帮助。

这是我一直在为一个项目工作的东西

小提琴-

单击移除按钮时，需要进行内联确认。如果确认，tr被移除

HTML

现在的
2013
2012
2011
2010
2009
预算
提出

Javascript（jQuery 1.10.1）

$（文档）.ready（函数（）{
$（“.add”）。单击（函数（）{
$（“tbody”）。附加（“”）；
}); 
$（“tbody”）。在（'click'，'remove'，function（）{
$（this.parent（）.append（$（“”））
$（this.remove（）；
}); 
$（“tbody”）。在（'click'，'removeConfirm'，函数（）上{
$（this.parent（）.parent（）.parent（）.remove（）；
}); 
$（“tbody”）。在（'click'，'removeCancel'，函数（）上{
$（this.parent（）.parent（）.append（“”）；
$（this.parent（）.remove（）；
}); 
}); 
$（文档）.ready（函数（）{
var form=$（'#ajax'）；//联系方式
//表格提交活动
$（“.text”）.blur（函数（）{
$.ajax（{
键入：“POST”，//表单提交方法get/POST
数据类型：'html'，//请求类型html/json/xml
数据：form.serialize（），//序列化表单数据
成功：函数（数据）{
url:'functions.php'；//表单操作url
}, 
错误：函数（e）{
控制台日志（e）
} 
}); 
}); 
}); 

谢谢您的回答。实际上，我想通过AJAX删除记录，AJAX coe对我来说运行良好。我想听听你的建议。隐藏可能是一个更好的选择，或者像fadein或FadeOut这样的任何其他选项。你能帮我吗？替换

.hide（）.fadeOut（）对>进行编码我怀疑您甚至还没有尝试过。下面的代码可以吗：var$ele=$（this）.closest（'tr'）.attr（'id'）$ele.fadeOut（）.remove（）；不，您正在将
$ele
设置为ID，并尝试对字符串执行jQuery。你编写PHP代码对吗
$（this）
是一个jQuery对象，将其视为一个类，
.attr（'id'）
返回一个字符串。你能在
$ele='SomeText'的地方这样做吗：
$ele->someFunction（）？不。线索：
$（this.nexist（'tr'）
是一个jQuery对象。但是
$（this.nexist（'tr'）.fadeOut（）.remove（）将仅删除。您必须使用
.fadeOut（）
的回调函数使其等待淡入完成。这就是
.remove（）
所属的位置。请阅读上面的文件。
$(".delete_question").click(function(){
  $(this).parents('tr:first').hide();
});

<table> 
<thead> 
    <tr> 
        <th>Current</th> 
        <th>2013</th> 
        <th>2012</th> 
        <th>2011</th> 
        <th>2010</th> 
        <th>2009</th> 
        <th>Budget</th> 
        <th>Proposed</th> 
        <th></th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
    </tr> 

</tbody> 

<tfoot> 
    <tr><td><a href="#" class="add">Add Row</a></td></tr> 
</tfoot> 
</table> 

$(document).ready(function(){ 
$(".add").click(function(){ 
$("tbody").append('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="removeSelection"><a href="#" class="remove">Remove</a></td></tr>'); 
}); 

$("tbody").on('click','.remove',function(){ 
    $(this).parent().append( $( '<div class="confirmation"><a href="#" class="removeConfirm">Yes</a><a href="#" class="removeCancel">No</a></div>')) 
    $(this).remove(); 
}); 

$("tbody").on('click','.removeConfirm',function(){ 
    $(this).parent().parent().parent().remove(); 
}); 

$("tbody").on('click','.removeCancel',function(){ 
    $(this).parent().parent().append('<a href="#" class="remove">Remove</a>'); 
    $(this).parent().remove(); 
}); 
}); 

$(document).ready(function() { 
var form = $('#ajax'); // contact form 

// form submit event 
$(".text").blur(function(){ 

$.ajax({ 

  type: 'POST', // form submit method get/post 
  dataType: 'html', // request type html/json/xml 
  data: form.serialize(), // serialize form data  
  success: function(data) { 
    url: 'functions.php'; // form action url 
  }, 
  error: function(e) { 
    console.log(e) 
  } 
}); 
}); 
});