Maihan Nijat Maihan Nijat - 7 months ago 25
Javascript Question

How to prevent jQuery event from bubbling when removing element?

According to jQuery documentation, the

event.stopPropagation();
should stop the event bubbling. In the following script, when I remove
event.stopPropagation();
the function removes the
ul
element code block including it's all children. I added
event.stopPropagation();
to stop bubbling but It returns following error:


TypeError: undefined is not an object (evaluating
'event.stopPropagation')


The following is the HTML and jQuery code:



$('span.remove').on('click', function() {
$(this).parent().hide(500, function(event) {
event.stopPropagation();
$(this).parent().remove();
});
});

.todo-list {
list-style: none;
padding: 0px;
}
.todo-item {

border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;

}
.remove {
float: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.8em;
color: #dd0000;
}
.remove:before {
content: 'X';
}
.remove:hover {
color: #ffffff;
}
.todo-item::after:hover {
background-color: #dd0000;
color: white;
}
.todo-item:hover {
background-color: #0EB0FF;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span>
</li>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span>
</li>
<li class='todo-item'>Dozen Eggs
<span class='remove'></span>
</li>
<li class='todo-item'>Walk the dog
<span class='remove'></span>
</li>
<li class='todo-item'>Cut the lawn
<span class='remove'></span>
</li>
<li class='todo-item'>Laundry
<span class='remove'></span>
</li>
</ul>





References:


  1. How to delete parent element using jQuery?

  2. How to stop events bubbling in jQuery?


Answer

You have to get your event object from the click() callback. If you look at the jquery hide() api docs, the complete callback doesn't get passed anything so your event is undefined, but the click() handler on the other hand gets passed the event object. So you just need to change your javascript to:

$('span.remove').on('click', function(event) {
  event.stopPropagation();
  $(this).parent().hide(500, function() {
    $(this).parent().remove();
  });
});

The reason however that the whole list gets removed is another issue. You reference parent() twice targeting the ul to be removed, so just get rid of one of the parents (the scope of $(this) changes to the parent in the hide callback). With this edit the code is:

$('span.remove').on('click', function(event) {
  event.stopPropagation();
  $(this).parent().hide(500, function() {
    $(this).remove();
  });
});

It's true however that the propagation of the event, doesn't really have anything to do with the ul being hidden as a whole so you can just remove the event.stopPropagation() line. Final code being:

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