如何通过单击jQuery中的子按钮来隐藏父元素答案

【问题标题】：How to hide parent element by clicking on child button in jQuery如何通过单击jQuery中的子按钮来隐藏父元素
【发布时间】：2013-03-20 13:53:33
【问题描述】：

我有以下 HTML 代码，我想隐藏带有类编辑字段和编辑字段链接链接的 div，并显示带有类值的 div。我尝试遵循 jQuery 代码，但它对我不起作用，但如果我像这样隐藏父级，这很好用：$(this).closest('div.editfield').parent().hide();

<tr class="row-fluid settingsrow">
                <td class="span2">
                    <strong>Name</strong>
                </td>
                
                <td class="span8">
                <div class="value">ALI ASAD</div>
                <div class="editfield">
                    <form class="form-vertical">         
                        <div class="control-group">
                            <label class="control-label">First Name</label>
                            <div class="controls">
                                <input type="text" name="firstname" id="firstname" placeholder="Ali">
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">Last Name</label>
                            <div class="controls">
                                <input type="text" name="lastname" placeholder="Asad">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button type="submit" class="btn btn-primary btn-mini">Save Changes</button>
                                <button class="btn btn-inverse btn-mini cancelactionsettings">Cancel</button>
                            </div>
                        </div>
                    </form> 
                </div>
                </td>
                <td class="span1"><a href="#" class="editfieldlink" style="text-decoration:none"><small>Edit</small></a></td>
            </tr>

而我的 JavaScript 是这样的：

$(document).ready(function(e) 
    {
    $('#settingseditor .cancelactionsettings').click(function(event)
    {
        event.preventDefault();

        $(this).closest('div.editfield').hide();
        $(this).closest('div.value').show();
        $(this).closest('a.editfieldlink').hide();
        
    });
    
});

【问题讨论】：

id="settingseditor" 的元素在哪里？
@GeorgeBoot 这显然是一个父级，比他展示的<tr> 更进一步

标签： jquery show-hide jquery-events

【解决方案1】：

你只是没有正确遍历

$(document).ready(function (e) {
    $('#settingseditor .cancelactionsettings').click(function (event) {
        event.preventDefault();
        $(this).closest('div.editfield').hide();
        $(this).closest('div.editfield').prev('.value').show(); // .value is a prev sibling of div.editfield
        $(this).closest('td').next().find('a.editfieldlink').hide();// anchor is in the next sibling td
    });
});

fiddle

【讨论】：

谢谢兄弟。实际上，我还将事件处理程序分配给继承给此按钮的父 div，因此效果不佳。

【解决方案2】：

试试 parents()。

$('#settingseditor .cancelactionsettings').click(function(event)
{
  event.preventDefault();

  $(this).parents('div.editfield').hide();
  $(this).parents('div.editfield').prev().show();
  $(this).parents('td.span8').next().find('a.editfieldlink');

});

注意：我在您的代码中没有找到 #settingseditor....如果 incase ，您正在尝试使用多选器，那么您忘记了 , 运算符...

$('#settingseditor , .cancelactionsettings').click(...
 //---------------^^^^--- here

【讨论】：

【解决方案3】：

不确定 ID 为 #settingseditor 的元素在哪里，但如果我只寻找 .cancelactionsettings 元素，它对我有用

$('#settingseditor, .cancelactionsettings').click(function(event)
{
   ...
}

jsFiddle

【讨论】：

【解决方案4】：

您的选择器不匹配任何元素；将此$('#settingseditor .cancelactionsettings') 更改为$('.cancelactionsettings')。

查看此fiddle 以获取工作示例

【讨论】：