remove parent if count of visible children is zero

Question

I want to create a function to remove parent if count of visible children is 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();}
}

Simply doesn't work and console is empty.

Any way to target the parent using some class? – Roko C. Buljan Jun 12 '18 at 08:30 — Roko C. Buljan, Jun 12 '18 at 08:30

score 0 · Answer 1 · answered Jun 12 '18 at 08:26

You need to use .is(':visible') on the jquery element el

nores('postitle');

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

.postitle {
   display: none;
}

<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>

What if there's more of such parents and .postitles on a page? You're not thinking on a `sliblings` base - which in my opinion is wrong. — Roko C. Buljan, Jun 12 '18 at 08:27

score 0 · Accepted Answer · answered Jun 12 '18 at 08:51

The best approach would be to iterate over each different parent of .postitle elements. So that if you have more than one div with .postitle elements inside it would work.

Here is an working example

$(".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();
    }
  });
}

.postitle {
  cursor: pointer;
}

<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>

score -1 · Answer 3 · answered Jun 12 '18 at 08:27

You are selecting the parent element and then you try to concatenate that element with the string ':visible' as if it were a string, which it is not. What you are probably trying to do is check if the parent element is visible. The answer to this related question explains how to do that: https://stackoverflow.com/a/178450/1253156

For your example, this would mean:

nores('postitle');

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

score -1 · Answer 4 · answered Jun 12 '18 at 08:28

You are using (el + ':visible').length which is incorrect as el itself refers to the JQuery object due to this line of code el = $('.' + el); so what you need to do is keep the el of the parameter unchanged and then use this to check the length using $(el + ':visible').length:

nores('postitle');

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

.postitle{
  visibility: hidden;
}

<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>

score -1 · Answer 5 · answered Jun 12 '18 at 08:45

You should think on a Siblings base.
Also why not passing the entire selector (not just a className)

Here's an example that accounts also for multiple wrappers/children relations

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>

remove parent if count of visible children is zero

5 Answers5