Question

jQuery如何通过单击蓝色，黄色，红色????

链接分别删除每个元素

不幸的是，find函数无法在整个树dom中移动。

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

你可以这样做：

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

由于目前还不完全清楚你想要什么，请查看此代码并告诉我它是否接近您想要的内容（另请参阅此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 3

试试这个：

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

或者这个：

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

DEMO

Answer 4

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

jQuery如何删除每个元素

4 个答案: