remove element by clicking on it

Question

I have a element that append to body when user click on a button. I want to remove appended element by clicking on it. How can I do this?

Code

    $("#btn1").click(function() {
      $("body").append("<div class='someClass'></div>");
  });
  $(".someClass").click(function() {
      $(this).remove();
  });

.someClass{
  width:100px;
  height:100px;
  background:green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">append div</button>

You need to use a [delegated event handler](http://api.jquery.com/on/#direct-and-delegated-events) — Pete, Jun 18 '18 at 10:22

Ankit Agarwal · Accepted Answer · 2018-06-18T10:27:21.327

4

You need to use $(document).on('click','.someClass', function(){...} syntax. This is because when the JQuery is loaded the element with class someClass do not exist in DOM. And you want to associate a click event into it. Thus, you need to listen for click of that element from document level so that when .someClass element is added in DOM it recognise the click event for it.

$("#btn1").click(function(){
  $("body").append("<div class='someClass'></div>"); 
});
$(document).on('click','.someClass', function(){
  $(this).remove(); 
});

.someClass{
  width:100px;
  height:100px;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">append div</button>

edited Jun 18 '18 at 10:27

answered Jun 18 '18 at 10:21

Ankit Agarwal

30,378
5
37
62

Why does my code not work? – Majid Jun 18 '18 at 10:26
@Majid read the answer. I have mentioned that reason. `This is because when ...` – Ankit Agarwal Jun 18 '18 at 10:26
1

You should have voted to close the question – Satpal Jun 18 '18 at 10:28
@Majid read the link I put in the comment above – Pete Jun 18 '18 at 10:28

score 1 · Answer 2 · answered Jun 18 '18 at 10:24

The problem is that the click event will only apply to elements that already exist. Because you are adding elements dynamically you will need to use the on() method instead. This will add the event to both existing elements and elements that are dynamically added later on.

For example:

$(document).on('click', '.someClass', function(){
    $("body").append("<div class='someClass'></div>");  
});

remove element by clicking on it

2 Answers2