Not able to remove parent div

Question

I am working on a project and there I am getting a value from input tag and then insert input value in a div and appending on screen with children element.

And What I want that when user click on children element then parent div would be removed and for this I'm using a function. That is working when I am using by default a section but when I append a section and then click on that's children where a function call like when user click on it's children parent section would be removed but my functionality not working.

$('#btn').click(function() {
  var menuFieldName = $('#text').val();
  $('.div').append('<div class="a">' + menuFieldName + '<span>X</span></div>');
  $('#text').val('');
});

$('.div .a span').on('click', function() {
  $(this).parent().remove();
});

.a {
  display: inline-block;
  padding: 5px 35px 5px 10px;
  position: relative;
  background: #eee;
  border-radius: 20px;
  margin: 10px;
}

.a span {
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  color: #fff;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="a">Test <span>X</span></div>
</div>

<input type="text" id="text">
<button id="btn">Add</button>

https://jsfiddle.net/jafaruddeen/rag71ma0/

Dij · Answer 1 · 2017-08-16T17:04:12.923

2

You are appending elements dynamically but you are not attaching any event handler to the newly added elements. To solve this you can use event delegation, you can attach events to .div like $('.div').on('click', '.a span', function() {

$('#btn').click(function() {
  var menuFieldName = $('#text').val();
  $('.div').append('<div class="a">' + menuFieldName + '<span>X</span></div>');
  $('#text').val('');
});

$('.div').on('click', '.a span', function() {
  $(this).parent().remove();
});

.a {
  display: inline-block;
  padding: 5px 35px 5px 10px;
  position: relative;
  background: #eee;
  border-radius: 20px;
  margin: 10px;
}

.a span {
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  color: #fff;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="div">
  <div class="a">Test <span>X</span></div>
</div>

<input type="text" id="text">
<button id="btn">Add</button>

edited Aug 16 '17 at 17:04

answered Aug 16 '17 at 17:03

Dij

9,761
4
18
35

thank you for solution :) actually I'm learner of jquery/javascript please help me how can I use e.target in my code – Jafaruddeen Ansari Aug 16 '17 at 17:06
@Xufox `this` works here perfectly fine, it references the span element with X. – Dij Aug 16 '17 at 17:09
@JafaruddeenAnsari why do you wanna use e.target here? – Dij Aug 16 '17 at 17:10
"this" is working fine but I just I wanted to ask as @Xufox suggested me to replace this by "e.target" and provide "e" as a parameter that's why I'm asking :) – Jafaruddeen Ansari Aug 16 '17 at 17:14
@JafaruddeenAnsari i dont think you need to replace `this` with e.target, it is working correctly as in the snippet. – Dij Aug 16 '17 at 17:18
@JafaruddeenAnsari consider accepting the answer, if it helped. Cheers! – Dij Aug 16 '17 at 17:52

score 0 · Answer 2 · answered Aug 16 '17 at 17:03

0

The reason you can't remove it is because when you register the event, the element on which you try to register it doesn't exist yet.

You need to use event delegation

$('body').on('click', '#my-element', function(){...});

answered Aug 16 '17 at 17:03

Radioreve

3,173
3
19
32

Thanks buddy :) for knowledgeable information – Jafaruddeen Ansari Aug 17 '17 at 16:33

score 0 · Answer 3 · answered Aug 16 '17 at 17:08

you have to call click function after append.. or call click function globally(body element) and match the span..

$(document).ready(function(){
        $('#btn').on('click',function(){
            var menuFieldName = $('#text').val();
            $('.div').append('<div class="a">'+menuFieldName+'<span class="close">X</span></div>');
            $('.div .a span').on('click', a);
            $('#text').val('');
        });

            $('.div .a span').on('click', a);    
    function a() {
       $(this).parent().remove();
    }
});

check your js fiddle. fixed it -> https://jsfiddle.net/jafaruddeen/rag71ma0/

and next option will be event delegation as per Radioreve suggession — Rajapandian, Aug 16 '17 at 17:11

Not able to remove parent div

3 Answers3