Question

如果可见子项的数量为0，我想创建一个删除父项的函数。

<div>
    <div class='postitle'>lorem ipsum</div>
    <div class='postitle'>lorem ipsum</div>
    <div class='postitle'>lorem ipsum</div>
</div>

nores('postitle');

function nores(el) {
  el = $('.' + el);
  let pnt = el.parent();
  if ((el + ':visible').length == 0) {pnt.remove();}
}

根本没有工作，控制台是空的。

Answer 1

您需要在jquery元素.is(':visible')

上使用el

＆＃13;

nores('postitle');

function nores(el) {
  el = $('.' + el);
  let pnt = el.parent();
  console.log(el.is(':visible'))
  if ((el.is(':visible')) == false) {pnt.remove();}
}

＆＃13;

.postitle {
   display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='postitle'>lorem ipsum</div>
<div class='postitle'>lorem ipsum</div>
<div class='postitle'>lorem ipsum</div>
</div>

＆＃13;

Answer 2

最好的方法是迭代.postitle元素的每个不同父级。因此，如果你有多个内有.postitle个元素的div，那就可以了。

以下是一个工作示例

＆＃13;

$(".postitle").on('click', function() {
  $(this).hide();
  nores('postitle');
});

function nores(el) {
  var parents = $("." + el).parent();
  parents.each(function(i, e) {
    var parent = $(e);
    if (parent.children("." + el + ":visible").length <= 0) {
      parent.remove();
    }
  });
}

＆＃13;

.postitle {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click on 'lorem ipsum' to hide it.
<br>
<div>
  One
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
</div>
<br>
<div>
  Two
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
</div>
<br>
<div>
  Three
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
</div>

＆＃13;

Answer 3

您正在选择父元素，然后尝试将该元素与字符串'：visible'连接起来，就像它是一个字符串一样，它不是。您可能要做的是检查父元素是否可见。这个相关问题的答案解释了如何做到这一点：https://stackoverflow.com/a/178450/1253156

对于您的示例，这意味着：

nores('postitle');

function nores(el) {
  el = $('.' + el);
  let pnt = el.parent();
  if (el.is(':visible')) {pnt.remove();}
}

Answer 4

您正在使用(el + ':visible').length这是不正确的，因为el本身引用了JQuery对象，因为这行代码el = $('.' + el);所以您需要做的是保持el参数未更改，然后使用此选项使用$(el + ':visible').length检查长度：

＆＃13;

nores('postitle');

function nores(el) {
  let elem = $('.' + el);
  let pnt = elem.parent();
  if ($(el + ':visible').length == 0) {pnt.remove();}
}

＆＃13;

.postitle{
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Some content
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
  <div class='postitle'>lorem ipsum</div>
</div>

＆＃13;

Answer 5

您应该考虑兄弟姐妹基础另外，为什么不传递整个选择器（不仅仅是className）

这是一个也考虑了多个包装/子关系的例子

nores('.postitle'); // Why not allow # . [] etc

function nores( selector ) {
  $(selector).each(function() {      
    if ( $(this).siblings().addBack().filter(function() {
      return $(this).is(":visible")
    }).length < 1 )  $(this).parent().remove();
  });
}

.red { border: 2px solid red; }
.hidden { display: none; }

<div class="red">
  <div class='postitle hidden'>1 lorem ipsum</div>
  <div class='postitle hidden'>2 lorem ipsum</div>
  <div class='postitle hidden'>3 lorem ipsum</div>
</div>

<div class="red">
  <div class='postitle'>1 lorem ipsum</div>
  <div class='postitle hidden'>2 lorem ipsum</div>
  <div class='postitle'>3 lorem ipsum</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果可见子项的数量为零，则删除父项

5 个答案: