Как jQuery удалять каждый элемент

Question

Как jQuery удалять каждый элемент отдельно, нажимая ссылки синий, желтый, красный ????

К сожалению, функция поиска не может перемещаться по дереву dom.

проект: http://jsfiddle.net/Q9VDh/

HTML разметка:

<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> 

В настоящее время я создал следующий код безопасности JQuery:

(function() { 

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

Answer 1

Поскольку это все-таки не совсем понятно, что вы хотите, пожалуйста, увидеть это код и скажите, если это приблизится к w Шляпа вы хотите (смотрите также эту 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]); 
     } 
    } 
} 

Некоторые пояснения: я добавил функцию, чтобы предотвратить некоторые повторяющегося кода. В функции, которая нажата, сохраняет (или получает) ее оригинальный класс (например, .blue), в то время как другие получают «was_», добавленный к ним (например, was_red).

Answer 2

попробовать это:

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

или это:

$('.blue_').click(function(event){ 
     $(this).closest('.view-products').find('.blue').remove(); 
}) 

DEMO

Answer 3

Вы можете сделать:

(function() { 
    $('.blue_, .yellow_, .red_').click(function (event) { 
     var cls = $(this).attr('class'); // Get the class name 
     cls = cls.substring(0, cls.length - 1); // Remove `_` from the class name 
     $('.' + cls).remove(); // Remove the element with the class name of clicked anchor without _ 
    }) 
}()); 

Fiddle Demo

Answer 4

$('a').click(function(event){ 
        $(this).hide(); 
      })