CODEWITHSUNDEEP
jquery
Xareyo
Xareyo

Reputation: 1377

jQuery hide all matching classes on click

Scenario

I'm in need of hiding all associated classes on click of the relevant button.

Then once there is only one div left I need to disable (or hide) that button.

So say if someone clicks <button class="remove-box box-one">Remove</button> it will hide all the elements that have .box-one only. This is similar for .box-two and .box-three.

NB: I can't change any of the mark-up.

Here's my code:

HTML

<div class="box box-one">
    <button class="remove-box box-one">Remove</button>
</div>
<div class="box box-two">
    <button class="remove-box box-two">Remove</button>
</div>
<div class="box box-three">
    <button class="remove-box box-three">Remove</button>
</div>

CSS

div {
    width: 200px; height: 200px;
    float: left;
    margin: 5px;
}
div.box-one {
    background: green;
}
div.box-two {
    background: yellow;
}
div.box-three {
    background: blue;
}

JS

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class');
    boxClass.each(function () {
        $(this).hide();
    }
    if ($('.remove-box') != null && < 2 ) {
        $(this).attr('disabled','disabled');
    }
});

Fiddle

http://jsfiddle.net/jECX4/1/

Thankyou for your time.

UPDATE:

Thanks for the answers, I'll run through them before selecting the most appropriate. Thanks.

Upvotes: 2

Views: 1287

Answers (6)

Richard Peck
Richard Peck

Reputation: 76784

Maybe I'm missing something, but surely you can just fadeOut the parent object when you click the "Removed" button?

http://jsfiddle.net/jECX4/12/

$('.remove-box').on("click", function () {
    $(this).parent().fadeOut();
});

<div class="box box-one">
    <button class="remove-box box-one">Remove</button>
</div>
<div class="box box-two">
    <button class="remove-box box-two">Remove</button>
</div>
<div class="box box-three">
    <button class="remove-box box-three">Remove</button>
</div>

Upvotes: 0

Alessandro Pezzato
Alessandro Pezzato

Reputation: 8842

Use .parent() to get the parent box.

http://jsfiddle.net/Fatgx/

$('.remove-box').click(function () {
    $(this).parent().hide();
    if ($('.box:visible').length <= 1) {
        $('.remove-box').prop('disabled',true);
    }
});

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

fiddle Demo

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class').match(/(box-.+)(?:\s|$)/g)[0];
    $('.'+boxClass).hide();
});

Upvotes: 0

Victor Ribeiro da Silva Eloy
Victor Ribeiro da Silva Eloy

Reputation: 4159

here this one is working, http://jsfiddle.net/victorrseloy/wz5X3/

your js should be:

$('.remove-box').click(function () {
    //var element = $(this);
    var boxClass = $(this).attr('class').split(/\s+/);
    $(boxClass).each(function () {
        if(this != "remove-box"){
            $("."+this).hide()
        }
    });
    if ($('.remove-box') != null && $('.remove-box').length< 2 ) {
        $(this).attr('disabled','disabled');
    }
});

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

Use that:

DEMO

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class').split(' ').pop();
    $('.'+boxClass).hide();
    if ($('.remove-box:visible').length < 2 ) 
        $('.remove-box:visible').prop('disabled',true);
});

Upvotes: 1

codingrose
codingrose

Reputation: 15709

Try:

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class').split(" ");
    var len = boxClass.length;    
    var cls = "";
    for(var i=0;i<len;i++){
        if(boxClass[i].indexOf("box-") >= 0){
            cls = boxClass[i];
            break;
        }
    }
    if(cls != ""){
        $("."+cls).hide();
    }
});

Updated fiddle here.

Upvotes: 1

Related Questions