如何删除菜单中单击的div和相应的项目

时间:2014-06-24 10:56:43

标签: jquery css

我想要删除类是单击此父级是删除而iconclass是删除请帮助......

<div class="itemlabel">
<div class="icon"><a href="#select1">1</a></div>
<div class="icon"><a href="#select2">2</a></div>
<div class="icon"><a href="#select3">3</a></div>
<div class="icon"><a href="#select4">4</a></div>
<div class="icon"><a href="#select5">5</a></div>
<div class="icon"><a href="#select6">6</a></div>
<div class="icon"><a href="#select7">7</a></div>
<div class="icon"><a href="#select8">8</a></div>
<div style="clear:both"></div>
</div>

// CSS

 .remove{
   display:inline-block;
   padding:20px;
   background-color:red;
    color:#fff;
    margin:10px;
   cursor:pointer;
}

// jquery

$(".remove").on('click', function() {
    $(this).parent().remove();
    $(".itemlabel .icon").remove(); /*this is problem .. i want one icon remove but all  is remove */
});

参见示例如何使用相同号码删除iconclass

http://jsfiddle.net/kisspa/74xSc/

4 个答案:

答案 0 :(得分:2)

添加包装类并执行以下操作:

$(".item .remove").on('click', function() {
    var id = $(this).attr('id');
    $(this).parent().parent().find('[href=#'+id+']').remove();
});

http://jsfiddle.net/74xSc/3/

答案 1 :(得分:1)

$('.remove').on('click', function() {
    // find enclosing item and determine position in parent container
    var $item = $(this).closest('.item'),
    indexToRemove = $item.index();

    // find corresponding item label and remove it together with item
    $('.itemlabel > .icon')
        .eq(indexToRemove)
        .add($item)
        .remove();
});

Demo

答案 2 :(得分:1)

它将删除点击的div和相应的itemlabel div

试试这个

$(".remove").on('click', function() {
    $(this).parent().remove();
    var idd=$(this).next().attr('id')
    $('.itemlabel div').find('a[href="#'+idd+'"]').parent().remove();
});

DEMO

答案 3 :(得分:1)

你的意思是这样的:http://jsfiddle.net/74xSc/4/

var place=1;
$(".remove").on('click', function() {
    var value=$(this).siblings('.lablecircle').attr('id');
    var eq=parseInt(value.replace(/\D/g,''));
    $(this).parent().remove();
    $('.icon').eq(eq-place).remove();
    place++;
});