If div is not empty, remove X from dom

If .details-display is not empty (which is true in the example below), .details-group should be removed. What is wrong with the code below?

HTML

<div class="details-group">
<span class="details">Details [+]</span>
<div class="details-display">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</div>
</div>

JS

if ( $('.details-group').find('.details-display').length ) {
  $(this).remove();
}

http://jsfiddle.net/8o49bnxL/


solution

In your code snippet, $(this) referred to the window object. You could iterate over the .details-group elements using the .each() method. In doing so, $(this) will refer to the current .details-group element.

Also, the element .details-display doesn’t have any children elements. If you want to check to see if it has any text, you could use the .text() method.

Example Here

$('.details-group').each(function () {
  if ($(this).find('.details-display').text().trim().length) {
    $(this).remove();
  }
});