试图隐藏一个div onClick一个按钮，该按钮是所述div的孩子

Question

我对jQuery和HTML很陌生，所以请原谅我，如果我犯了一个真正的noob错误。我有一个带按钮侧的div。当用户完成阅读后，我希望他们能够关闭div。

<div class="modalDiv">
 blah blah blah
 <p class="center"><input type="button" onclick="$(this).parent().hide()" value="x"></p>
 </div>

但是每当有人点击按钮时，它实际上并没有隐藏div：（

按钮消失，但div停留在屏幕上。为什么parent（）没有得到主要的div？

Answer 1

$.parent()将拉出＆＃34;包装＆＃34;的HTML元素。有问题的按钮。它实际上并不寻找div，因为＆＃34;父母＆＃34;可以是真的。

在这种情况下，DOM实际上是div->p->input，因此当您在.parent()上调用this时，实际上是在选择<p>，因为这是div的父级

有两种解决方案：

（a）您可以选择父（p）的父（div）：

$(this).parent().parent().hide()

或，（b）你可以找到＆＃34;最近的＆＃34;将div modalDiv加到有问题的元素

$(this).closest('div.modalDiv').hide()

我建议您使用（A），因为您的HTML不太复杂或过于嵌套。

祝你好运

Answer 2

隐藏需要更新的div

$(this).parent().hide()

到

$(this).parent().parent().hide()

作为输入父级的原因是p而不是div。因此，如果您需要隐藏div，则需要转到p的父级，然后隐藏它。

Answer 3

可以说，比使用parent（）更好的方法是使用jquery直接关注类。

$('.modalDiv').hide();

以这种方式实现这一目标的好处是它现在已从HTML中解除耦合。无论儿童按钮出现在哪里，您都可以保证在点击时隐藏正确的div，这意味着您将来可能不会遇到维护问题。

您还必须考虑到，随着您的HTML变得越来越复杂，您最终会使用名为 n 次的.parent()吗？ .closest()不会遇到这个问题。

它也更清晰一点，作为开发人员第一次查看你的东西我可以查看js并立即看到它的作用，而不是必须参考HTML并评估结构。