Reputation: 1377
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
Thankyou for your time.
UPDATE:
Thanks for the answers, I'll run through them before selecting the most appropriate. Thanks.
Upvotes: 2
Views: 1287
Reputation: 76784
Maybe I'm missing something, but surely you can just fadeOut the parent object when you click the "Removed" button?
$('.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
Reputation: 8842
Use .parent()
to get the parent box.
$('.remove-box').click(function () {
$(this).parent().hide();
if ($('.box:visible').length <= 1) {
$('.remove-box').prop('disabled',true);
}
});
Upvotes: 1
Reputation: 57105
$('.remove-box').click(function () {
var boxClass = $(this).attr('class').match(/(box-.+)(?:\s|$)/g)[0];
$('.'+boxClass).hide();
});
Upvotes: 0
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
Reputation: 74410
Use that:
$('.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
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();
}
});
Upvotes: 1