How to prevent jQuery event from bubbling when removing element?

Question

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:

you can access the original DOM event in `event.originalEvent`, like `event.originalEvent.stopPropagation()`. — rupps, Apr 21 '16 at 20:40
There is no event that is being passed to your `hide` function because it isn't an event. Put `event` in the `click, function(event)` — Adjit, Apr 21 '16 at 20:43
The `hide()` function doesn't have an event, the `.on('click', function(event) {...` does — adeneo, Apr 21 '16 at 20:44

jpopesculian · Accepted Answer · 2016-04-21T20:57:33.590

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();
  });
});

It removes `ul` element completely. I need to remove only the parent element of `span.remove' class. — Maihan Nijat, Apr 21 '16 at 20:50
Ah I see, I didn't run it. I edited my answer to account for that. I hope that clarifies — jpopesculian, Apr 21 '16 at 20:53

score 2 · Answer 2 · edited Jun 30 '17 at 14:07

Move event obj to the delegated click event.

Instead of this use event.target.

$('span.remove').on('click', function(event) {
  var tgt = event.target;
  $(tgt).parent().hide(500, function() {
    $(tgt).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>

I'm glad it did, sir. @KevinB done, I didn't have time test it thoroughly just enough to get a result, thanks. — zer00ne, Apr 21 '16 at 20:54
@MaihanNijat this solution removes the li of the `event.target`, isn't that what you wanted? — zer00ne, Apr 21 '16 at 21:02
Thank you. I voted up your answer as it achieve what I was looking for. — Maihan Nijat, Apr 21 '16 at 21:04

Jonathan Lam · Answer 3 · 2016-04-21T20:53:31.650

1

Multiple problems:

The event variable is not being passed. Don't include the event parameter in the hide() function, but rather in the on() event handler. This should stop the error.
You are removing the parent of the parent. Replace the following line: $(this).parent().remove(); with $(this).remove();
You actually don't need the stopPropagation(). After fixing the above two problems, you don't need it. The click event is not propagating.

edited Apr 21 '16 at 20:53

answered Apr 21 '16 at 20:52

Jonathan Lam

16,831
17
68
94

@KevinB Oops. Edited. – Jonathan Lam Apr 21 '16 at 20:53

How to prevent jQuery event from bubbling when removing element?

3 Answers3