CODEWITHSUNDEEP
javascriptjquery
mikelovelyuk
mikelovelyuk

Reputation: 4152

Hide parent element

Here is my HTML;

<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
    <div class="question">
        <h2 class="question__title">Country</h2>
        <div class="form-field form-field--dropdown">
            <select required="1" name="country" data-parsley-group="group-0">
                <option selected="selected" value="">Please select...</option>
                <option value="great-britain">Great Britain</option>
                <option value="zimbabwe">Zimbabwe</option>
            </select>
        </div>
    </div>

    <div class="question"> // line 13
        <h2 class="question__title">Postcode</h2>
        <div class="form-field">
            <input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
        </div>
    </div>
</div>

How can I hide the div starting on "line 13" (see comment in code) unless the Country question above's input is Great Britain?

It's dynamic so I can't assign the div directly to give it a name. All I have to go on is the input which has name of postcode.

If I could access that div, then I think it would be something like;

$('#country').on('change.postcode', function() {
  $("#").toggle($(this).val() == 'great-britain');
}).trigger('change.postcode');

Upvotes: 2

Views: 991

Answers (3)

Hackerman
Hackerman

Reputation: 12305

A combination of parent and next should do the trick:

$(function(){
 $('select[name="country"]').change(function(){
     var country = $(this).val();
   if(country == 'great-britain'){
      $(this).parent().parent().next('.question').show();
   }
   else{
        $(this).parent().parent().next('.question').hide();
   }
 });
});

In order to hide the dinamically generated html, you can do something like this:

$('.question').each(function(i,item){
    if((i+1) % 2 ==0){
    $(item).hide();
  }
});

Updated fiddle: https://jsfiddle.net/robertrozas/pen942nf/1/

Upvotes: 1

Luca Schimweg
Luca Schimweg

Reputation: 797

There is a function in JQuery called parent(). You can use get the input node via

$("input[name='postcode']")

and then access the parent of it's parent to hide it like that:

$("input[name='postcode']").parent().parent().hide();

Learn more about parent() here.

EDIT (thanks to andlrc):

You could also use closest() instead of the double parent():

$("input[name='postcode']").closest("div.question").hide();

see here.

Upvotes: 3

SD433
SD433

Reputation: 119

You This must work:

<style>
.hide{display:none;}
</style>

<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
    <div class="question">
        <h2 class="question__title">Country</h2>
        <div class="form-field form-field--dropdown">
            <select required="1" name="country" data-parsley-group="group-0">
                <option selected="selected" value="">Please select...</option>
                <option value="great-britain">Great Britain</option>
                <option value="zimbabwe">Zimbabwe</option>
            </select>
        </div>
    </div>

    <div class="question sh"> // line 13
        <h2 class="question__title">Postcode</h2>
        <div class="form-field">
            <input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
        </div>
    </div>
</div>

<script>

 $("#country").change(function(){
$(this).find("option:selected").each(function(){
  if($(this).attr("value")=="great-britain"){
    $('.sh').show();
  }
  else{
    $('.sh').hide();
});
});
</script>

Upvotes: 0

Related Questions