CODEWITHSUNDEEP
jquerytags
ABDO Zeidane
ABDO Zeidane

Reputation: 63

"x" delete field from dynamic form

I would like to add and delete fields dynamically in a form as following: enter image description here

here is my code: JQuery

$('#addFeild').click(function(){
    $('#divTest').append("<div> <input name='titres' type='text'/> <a href='#' id='close_box'>x</a>  </div>");
});

$('#close_box').click(function(){
    $(this).parent().remove();
});

Jsp:

<html:form action="/test.do">
    <div id="divTest">
    </div>
    <a href="#" id="addFeild">+</a> 
    <html:submit property="submit" value="Submit"/>
</html:form>

I used this example but it doesn't work!! Any help is appreciated :)

Upvotes: 0

Views: 100

Answers (5)

Balachandran
Balachandran

Reputation: 9637

use event delegation .

  • Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
 $("#divTest").on("click","#close_box",function(e){
        e.preventDefault();
        $(this).parent().remove();
    });

Upvotes: 1

Jai
Jai

Reputation: 74738

This is called event delegation issues, whenever an event is bound to a dynamically generated element then that event needs to be delegated to the closest static parent like:

$('#divTest').on('click', '#close_box', function(){
    $(this).parent().remove();
});

and instead of .parent() you can use .closest() too:

$(this).closest('div').remove();

The syntax of event delegation is like:

$(staticparent).on(event, selector, callback);

Note:

if you are not delegating to closest static parent then you don't need to have to put the bound event in doc ready block.

As this answer is suggesting to use the closest static parent then you have to put the event in the doc ready block.

so try this:

$(function(){ // doc ready
   $('#divTest').on('click', '#close_box', function(){
       $(this).parent().remove();
   });
}); // doc ready ends

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

That example clearly shows event delegation to be implemented and you haven't done that!

So Try this:

$("#divTest").on('click','#close_box',function(){
    $(this).closest('div').remove();
});

But i suggest you to create unique IDs for the close boxes, as IDs must be unique or either use a class instead of an ID

$('#divTest').append("<div> <input name='titres' type='text'/> <a href='#' class="close_box">x</a>  </div>");


$("#divTest").on('click','.close_box',function(){  // with class 
    $(this).closest('div').remove();
});

Upvotes: 1

mindbard
mindbard

Reputation: 38

Try this?

$('#close_box').click(function(){
    $(this).closest('div').remove();
});

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

when you dynamically add an element you should put an event listener to it if you want it to be triggered on an event:

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

Upvotes: 0

Related Questions