parent（）。remove无法正常工作

Question

I have a problem with deleting the parent on a click on .icon-trash

<div class="ui-wrapper ui-draggable">
  <img id="link1" class="decor ui-resizable" src="http://i.imgur.com/nYkdOne.png">
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
  <img class="icon-layer-up icon-on-img" src="" style="z-index: 1;">
  <img class="icon-layer-down icon-on-img" src="" style="z-index: 1;">
  <img class="icon-trash icon-on-img" src="" style="z-index: 1;">
  <img class="icon-copy-el icon-on-img" src="" style="z-index: 1;">
</div>

My js code is deliting only elements with a class .icon-on-img

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

How can I remove everything by clicking on .icon-trash element?

Answer 1

try this

  $(document).ready(function () {
        $(".icon-trash").on("click", function () {
            $(this).parent().remove();
        });
    });

Answer 2

working example here: (click on the orange box) http://jsfiddle.net/cpEff/

just added the class '.ui-wrapper' from your parent div to your jQuery

$(document).on('click', '.icon-trash', function() {  
  $(this).parent('.ui-wrapper').remove();
});

Answer 3

The following code should work:

$('.icon-trash').on('click', function() {  
  $(this).parent().remove();
});

Answer 4

Use body on the event

$('body').on('click', '.icon-trash', function() {  
    $(this).parent().remove();
 });

working jsfiddle http://jsfiddle.net/HdMNY/