Jquery each function and click event not working

Question

I want to remove each selected element with same class element. My jquery coding is given bellow

$(".del_layer").each(function(){        $(this).click(function(){
           $(this).parent().remove();
                });

            });

my html structure is

<li class="select_layerList" data-refind="0">
<img width="20px" src="tmp_card_imgs/a.png">
Layer 0:Image
<span class="del_layer" style="cursor:pointer;">X</span>
</li>
<li class="select_layerList" data-refind="0">
<img width="20px" src="tmp_card_imgs/b.png">
Layer 0:Image
<span class="del_layer" style="cursor:pointer;">X</span>
</li>

But each function is not working. How can I solve this

You don't need to keep your .click() inside the .each(). — painotpi
– painotpi, Commented Jun 21, 2013 at 9:41

Darren · Accepted Answer · 2013-06-21 09:42:25Z

1

It's working fine.

http://jsfiddle.net/4LeuA/

Ensure you have the DOM has loaded, place your code inside a document.ready()

$(document).ready(function() {

});

answered Jun 21, 2013 at 9:42

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GautamD31 · Accepted Answer · 2013-06-21 09:41:14Z

0

You can remove each function because you can select them via class name and put your script on document ready like

$(document).ready(function(){
    $('.del_layer').on('click',function(){
        $(this).parent().remove();
    });   
});

answered Jun 21, 2013 at 9:41

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

Rajeev · Accepted Answer · 2013-06-21 09:42:08Z

0

Why not try something like this

 $(".del_layer").on('tap',function(){
  $(this).parent().remove();
 });

answered Jun 21, 2013 at 9:42

Rajeev

47.3k80 gold badges191 silver badges290 bronze badges

Comments

Jai · Accepted Answer · 2013-06-21 09:45:40Z

0

There is no need to traverse through .each(), just apply the event to the selector and remove its parent:

$(".del_layer").click(function(){
    $(this).parent('li').remove();
});

and you can use .closest() function to traverse up to the desired parent.

$(".del_layer").click(function(){
    $(this).closest('li').remove();
});

answered Jun 21, 2013 at 9:45

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

steveukx · Accepted Answer · 2013-06-21 09:46:03Z

0

Using event delegation, you can set the same handler once:

$(document).on('click', '.del_layer', function() {
  $(this).parent().remove();
});

answered Jun 21, 2013 at 9:46

steveukx

4,34321 silver badges27 bronze badges

Collectives™ on Stack Overflow

Jquery each function and click event not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related