BlackQNX BlackQNX - 5 months ago 16
jQuery Question

How can jQuery delete every element

How can jQuery delete every element separately by clicking the links blue, yellow, red ????

Unfortunately, find function does not manage to move throughout the tree dom.

project in: http://jsfiddle.net/Q9VDh/

HTML markup:

<div class="view-products">
<div class="view-header">
<div class="reset_pol">
<a class="blue_" href="#">Blue</a><a class="yellow_" href="#">yellow</a><a class="red_" href="#">Red</a>
</div>
</div>

<div class="view-content">
<div class="jcarousel-container jcarousel-container-horizontal jcarousel-navigation-after" style="position: relative; display: block;">
<div class="jcarousel-clip jcarousel-clip-horizontal">
<ul class="jcarousel jcarousel-view--listaoferowanychproduktow--block jcarousel-dom-1 jcarousel-processed jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 3286px;">
<li class="odd jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none;">
<div class="views-field views-field-field-kategoria">
<div class="field-content">
<div class="blue">
content
</div>
</div>
</div>
</li>
<li class="even jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="float: left; list-style: none;">
<div class="views-field views-field-field-kategoria">
<div class="field-content">
<div class="yellow">
content
</div>
</div>
</div>
</li>
<li class="odd jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" jcarouselindex="3" style="float: left; list-style: none;">
<div class="views-field views-field-field-kategoria">
<div class="field-content">
<div class="red">
content
</div>
</div>
</div>
</li>
<li class="even jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4" style="float: left; list-style: none;">
<div class="views-field views-field-field-kategoria">
<div class="field-content">
<div class="red">
content
</div>
</div>
</div>
</li>
</ul>
</div>

</div>
</div>
</div>


At the moment I have created the following security code jQuery:

(function () {

$('.blue_').click(function(event){
$(this).closest('.blue');
})
}());

Answer

Since it's still not completely clear what you want, please see this code and tell me if that comes close to what you want (see also this FIDDLE):

$('.blue_').click(function(event){
   switchClass('blue');
});
$('.yellow_').click(function(event){
   switchClass('yellow');
});
$('.red_').click(function(event){
   switchClass('red');
});
function switchClass(selectedClass) {
    var classes = ['red', 'yellow', 'blue'];
    for(var i = 0; i < classes.length; i++) {
        if (selectedClass == classes[i]) {
            $('.was_'+selectedClass).addClass(selectedClass).removeClass('was_'+selectedClass);
        } else {
            $('.'+classes[i]).addClass('was_'+classes[i]).removeClass(classes[i]);
        }
    }
}

Some explanation: I added a function to prevent some duplicate code. In the function the class that is clicked keeps (or gets) it's original class (e.g. .blue) while the others get "was_" appended to them (e.g. was_red).

Comments