CODEWITHSUNDEEP
jquery
John
John

Reputation: 227

jQuery hide div if not with specific ID

I got a form that will create duplicates of its self on click.

I want to be able to clear the input fields and hide the specific divs on another click if not the first row. If this is the first div it should only clear the form.

what i got is this:

<div id="fields_1" style="margin-bottom: 5px;" class="items">
    <div class="form_div">
        <input name="01_name" id="01_name" value="" placeholder="name" type="text" />
    </div>
    <div class="form_div plusminus">
        <div class="minus">
            <span>Delete Row</span>
        </div>
    </div>
</div>
<div id="fields_2" style="margin-bottom: 5px;" class="items">
    <div class="form_div">
        <input name="02_name" id="02_name" value="" placeholder="name" type="text" />
    </div>
    <div class="form_div plusminus">
        <div class="minus">
            <span>Delete Row</span>
        </div>
    </div>
</div>


$(document).ready(function(){
    $(".minus").click(function(){
        $(this).parent('div').parent('div').find(':input').val('');
        if($(this).parent('div').parent('div').not('#fields_1'))
        {
            $(this).parent('div').parent('div').hide('slow');
        }
    });
});

Can anyone see were i am wrong?

Upvotes: 0

Views: 1255

Answers (2)

user463231
user463231

Reputation:

You want to change these three lines:

if($(this).parent('div').parent('div').not('#fields_1'))
{
    $(this).parent('div').parent('div').hide('slow');
}

to be this:

$(this).parent('div').parent('div').not('#fields_1').hide('slow');

The reason is that .not is used to filter a query selection. It does not return true or false.

So when you execute $(this).parent('div').parent('div') you have a selection of divs. Now when you run .not('#fields_1') on that selection you remove any div that is true for the test "has id of fields_1". Now your selection doesn't contain the div with that id and you can perform whatever action you want on that filtered group.

Upvotes: 0

Jazi
Jazi

Reputation: 6732

Don't use multiple parent() functions. Instead, use closest(). And, use :first-of-type selector.

Maybe this will help:

$(document).ready(function(){
    $(".minus").click(function(){
        $(this).closest('div.items').find('input').val('');
        $(this).closest('div.items').not('div.items:fist-of-type').hide('slow');
    });
});

Upvotes: 1

Related Questions