How to remove an element that is added dynamically in Javascript

Question

I have the following code to create some element:

<div id="parent">
    <div id="block_1" >
        <div>
          <input type="text">
        </div>
        <img src="arrow.jpg">
        <div>
          <input type="text">
        </div>
        <div><a href="#" class="remove_block">Remove</a></div>
    </div>
</div>

the result look like this:

enter image description here

When user presses the ADD button it will go to a Javascript function and create the same block of div. Here is the code:

function add_block() {
var curDiv = $('#parent');
var i = $('#parent div').size()/4 + 1;
var newDiv='<div id="block_'+ i + '" class="parent_div">' +
'<div>' +
'<input type="text">' +
'</div>' +
'<img src="arrow.jpg">' +
'<div>' +
'<input type="text">' +
'</div><div><a class="remove_block" href="#">Remove</a></div>' +
'</div>';
$(newDiv).appendTo(curDiv);
};

Whenever the user press the "Remove" link on the left hand side of the block, that corresponding block should be removed. And this is what I did:

$('a.remove_block').on('click',function(events){
   $(this).parents('div').eq(1).remove();
});

The problem is that only the remove in the original block work, the rest didn't . Anybody know why?

enter image description here

I am new to jQuery and Javascript, so I really appreciate any help and suggestion Note: I use jQuery 2.0.3

Aurora0001 · Accepted Answer · 2017-07-23 09:02:14Z

30

Because it's dynamic content, you can't bind events like the static content, it will not bind to the elements because they don't appear at the time you bind.

So you should bind event like this:

$('#parent').on('click', 'a.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});

edited Jul 23, 2017 at 9:02

Aurora0001

13.6k5 gold badges52 silver badges53 bronze badges

answered Oct 2, 2013 at 4:05

Chokchai

1,72212 silver badges12 bronze badges

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

1 Comment

Austin Over a year ago

Do you reckon this should be standard practice for binding any and all click links?

Arun P Johny · Accepted Answer · 2013-10-02 04:05:14Z

3

You need to use event delegation for dynamically added elements. Even though you have used .on() the syntax used does not use event delegation.

When you register a normal event it adds the handler to only those elements which exists in the dom at that point of time, but when uses event delegation the handler is registered to a element which exists at the time of execution and the passed selector is evaluated when the event is bubbled upto the element

$(document).on('click', '.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});

answered Oct 2, 2013 at 4:05

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-02 04:07:38Z

1

$('a.remove_block').on('click',function(events){
  $(this).parents('.parent_div').remove();
  return false;
});

edited Oct 2, 2013 at 4:07

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

answered Oct 2, 2013 at 4:07

Adrian

1906 bronze badges

Comments

Rmy5 · Accepted Answer · 2018-11-11 11:06:22Z

0

I had the situation where the dynamic element to remove wasn't a descendant of my event listener:

siteSel.on('select2:select', function (e) {
      // remove some other dynamic element on page.
});

Solution I found was using when() method.

siteSel.on('select2:select', function (e) {
      let dynamicElement = $('.element');
      $.when(dynamicElement).then(dynamicElement.remove());
});

answered Nov 11, 2018 at 11:06

Rmy5

5978 silver badges23 bronze badges

Comments

Walter Gandarella · Accepted Answer · 2013-10-02 04:05:44Z

-3

You can use the .live for this:

$('body').live('click','#idDinamicElement', function(){
   // your code here
});

answered Oct 2, 2013 at 4:05

Walter Gandarella

8781 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to remove an element that is added dynamically in Javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related