underscore template dynamically remove row Jquery

Question

underscore template dynamically remove row Jquery

alpha.romeo

2019年3月5日 17:03

I have this underscore template to add and delete row :

#
  jQuery( document ).ready( function() {
   jQuery( '.add-ingr' ).click( function() {
    jQuery( '#re-ingr .ingr' ).append( 'divinput 
     type="text" name="ingr[]" value=""/a href="#" 
     class="remove_field" style="margin-left:10px;"Remove/adiv');
       });
    jQuery( '.remove_field' ).on("click", function(e){ 
      e.preventDefault(); jQuery(this).parent('div').remove();
       });
      });
        #

the add row with remove link works , it generates the good html output:

   divinput type="text" name="ingredients[]" value=""a href="#" 
   class="remove_field" style="margin-left:10px;"Remove/adiv/div 
   /div

But not the remove , nothing happen when i click on the remove hyperlink Any idea pls

Topic underscore jquery templates Wordpress

Category Web

mrben522 · Accepted Answer · 2019年3月5日 17:03

The div's you are trying to bind that event to don't exist when you create the listener. you need to use jQuery event delegation for this. like so:

jQuery( 'body' ).on("click", '.remove_field', function(e){
    e.preventDefault(); jQuery(this).parent('div').remove();
});

RiddleMeThis · Accepted Answer · 2019年3月5日 17:02

This isn't WP related but Its not working because you are trying to add an event to a dynamically created element.

Replace...

jQuery( '.remove_field' ).on("click", function(e){ 
    e.preventDefault(); jQuery(this).parent('div').remove();
});

With

jQuery( 'body' ).on("click", '.remove_field', function(e){ 
    e.preventDefault(); jQuery(this).parent('div').remove();
});

You can read more about your issue here.

underscore template dynamically remove row Jquery

About