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 http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Aug 06 '15 at 05:32
how? It is completely different. My question is the function I was writing on the page load and it is not calling. — Futuregeek, Aug 06 '15 at 05:34
Because from the script you have provided the `delete_contact` elements are created dynamically — Arun P Johny, Aug 06 '15 at 05:36
So the question is exactly a duplicate of http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Aug 06 '15 at 05:42

score 1 · Accepted Answer · answered Aug 06 '15 at 05:33

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.

score 0 · Answer 2 · answered Aug 06 '15 at 05:37

0

Try:

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

answered Aug 06 '15 at 05:37

Rajan Goswami

769
1
5
17

`$(function() { });` is another way of writing `$(document).ready(function() {});` So, its basically is same as OP's code – Satpal Aug 06 '15 at 05:47

Delete image onclick in javascript - Not working

2 Answers2