CODEWITHSUNDEEP
javascriptjqueryparent-child
Marcel
Marcel

Reputation: 55

hide parent based on childs content

I am trying to hide the parent-div based on the child's content:

<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

Currently I am using this javascript, but it hides all div's with the same class on the page. I need it to only hide the parent div.

(function($) {
    $(document).ready(function() {
        var x = $("span.value").text();
        if (x == 0){
            $("div.featurevalue").hide();
        };    
    })
})(jQuery);

Any suggestions?

Upvotes: 2

Views: 171

Answers (6)

Kiran Shahi
Kiran Shahi

Reputation: 7980

Loop the element with each() and check the value and hide the parent with $(this).parent().hide()

(function($) {
  $(document).ready(function() {
    $('span.value').each(function(){
      if ($(this).text() == 0){
        $(this).parent().hide();
      };
    });
  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

Upvotes: 0

SilverSurfer
SilverSurfer

Reputation: 4366

A one line solution with contains selector:

$("span.value:contains(0)").closest("div.featurevalue").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

Or if you dont wan´t to use closest() or parent() just use has() selector:

$("div.featurevalue:has(span.value:contains(0))").hide();

Upvotes: 1

sethuraman
sethuraman

Reputation: 189

Check this below code. We dont need to loop through the elements we can simply use the filter. Here i have added a class "hide" to the parent.

 $('.featurevalue span').filter(':contains("0")').parents('.featurevalue').addClass('hide');

Upvotes: 0

patilprashant6792
patilprashant6792

Reputation: 353

Hope this helps: 

$(document).ready(function() {    
    $("span.value").each(function(){
        var x = $(this).text();
        if (x == 0) {
            $(this).closest(".featurevalue").hide();
        }
    })
})

Upvotes: 2

Michael W. Czechowski
Michael W. Czechowski

Reputation: 3457

Just use the .parent() jQuery function to target the specific parents and .each() to iterate through all children:

(function($) {
  $(document).ready(function() {

    $("span.value").each(function( index ) {
      if ($(this).text() == '0') {
        $(this).parent("div.featurevalue").hide();
      }
    });
  })
})(jQuery);

Alternativly you can use .closest() like @patilprashant6792 postulates.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can use .filter() to get span elements with specified text, then travse up using .closest() to target div and .hide() them

$("span.value").filter(function() {
  return $(this).text() === "0"
})
.closest("div.featurevalue")
.hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

Upvotes: 1

Related Questions