Delete image onclick in javascript - Not working

Question

I have following js code

var page = '<div class="row delete_contact">
              <div class="col-xs-6 contact_item>
                <label class="control-label col-xs-2" for="id">ID:</label>
                <div class="controls col-xs-3">
                 <input class="form-control id" name="id" value="' + id +'">
                </div>
                <a href="javascript:void(0)" class="delete_contact_details control-label">
                   <span class="delete_contact_details control-label col-xs-1 glyphicon glyphicon-trash">
                   </span>
                </a>
             </div>
            </div>';

when we click on 'delete' image, it has to delete the full row(div). I tried following while page loading

$(function() {
   $('.delete_contact_details').on( "click", function() {
       $(this).closest('.delete_contact').remove();
   });
});

But it is not calling the below code. Anyone please help!

I'm voting to close this question as off-topic because it is a duplicate of stackoverflow.com/questions/203198/… — Arun P Johny
– Arun P Johny, Commented Aug 6, 2015 at 5:32
how? It is completely different. My question is the function I was writing on the page load and it is not calling. — Futuregeek
– Futuregeek, Commented Aug 6, 2015 at 5:34
Because from the script you have provided the delete_contact elements are created dynamically — Arun P Johny
– Arun P Johny, Commented Aug 6, 2015 at 5:36
So the question is exactly a duplicate of stackoverflow.com/questions/203198/… — Arun P Johny
– Arun P Johny, Commented Aug 6, 2015 at 5:42

Satpal · Accepted Answer · 2015-08-06 05:33:29Z

1

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.

Its seems you are dynamically generating elements, use Event Delegation using .on() delegated-events approach.

$(function() {
   $(document).on( "click", '.delete_contact_details', function() {
       $(this).closest('.delete_contact').remove();
   });
});

In place of document you should use closest static container.

answered Aug 6, 2015 at 5:33

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Rajan Goswami · Accepted Answer · 2015-08-06 05:37:02Z

0

Try:

$(document).ready(function() {
   $('.delete_contact_details').click(function() {
       $(this).closest('.delete_contact').remove();
   });
});

answered Aug 6, 2015 at 5:37

Rajan Goswami

7691 gold badge5 silver badges17 bronze badges

1 Comment

Satpal Over a year ago

$(function() { }); is another way of writing $(document).ready(function() {}); So, its basically is same as OP's code

Collectives™ on Stack Overflow

Delete image onclick in javascript - Not working

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related