Home/ Questions/Q 758663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T15:30:23+00:00

What behavior should I expect if I delete a DOM element that was used

  • 0

What behavior should I expect if I delete a DOM element that was used to start an event bubble, or whose child started the event bubble – will it continue to bubble if the element is removed?

For example – lets say you have a table, and want to detect click events on the table cells. Another piece of JS has executed an AJAX request that will eventually replace the table, in full, once the request is complete.

What happens if I click the table, and immediately after the table gets replaced by a successful completion of an AJAX request? I ask because I am seeing some behavior where the click events don’t seem to be bubbling – but it is hard to duplicate.

I am watching the event on a parent element of the table (instead of attaching the event to every TD), and it just doesn’t seem to reach it sometimes.

EDIT: Encountered this problem again, and finally got to the root of it. Was not a event-bubbling issue at all! See my answer below for details.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Empirically: It depends on what browser you’re using; IE cancels the event, everything else (as far as I can tell) continues it. See the test pages and discussion below.

    Theoretically: Andy E’s head helpfully found that DOM2 says the event should continue because bubbling should be based on the initial state of the tree. So the behavior of the majority is correct, IE’s on its own here. Quelle surprise.

    But: Whether that relates to what you’re seeing is another question indeed. You’re watching for clicks on a parent element of the table, and what you suspect is that very rarely, when you click the table, there’s a race condition with an Ajax completion that replaces the table and the click gets lost. That race condition can’t exist within the Javascript interpreter because for now, Javascript on browsers is single-threaded. (Worker threads are coming, though — whoo hoo!) But in theory, the click could happen and get queued by a non-Javascript UI thread in the browser, then the ajax could complete and replace the element, and then the queued UI event gets processed and doesn’t happen at all or doesn’t bubble because the element no longer has a parent, having been removed. Whether that can actually happen will depend a lot on the browser implementation. If you’re seeing it on any open source browsers, you might look at their source for queuing up UI events for processing by the interpreter. But that’s a different matter than actually removing the element with code within the event handler as I have below.

    Empirical results for the does-bubbling-continue aspect:

    Tested Chrome 4 and Safari 4 (e.g., WebKit), Opera 10.51, Firefox 3.6, IE6, IE7, and IE8. IE was the only one that cancelled the event when you removed the element (and did so consistently across versions), none of the others did. Doesn’t seem to matter whether you’re using DOM0 handlers or more modern ones.

    UPDATE:
    On testing, IE9 and IE10 continue the event, so IE noncompliance with spec stops at IE8.

    Test page using DOM0 handlers:

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
</style>
<script type='text/javascript'>
window.onload = pageInit;

function pageInit() {
    var parent, child;

    parent = document.getElementById('parent');
    parent.onclick = parentClickDOM0;
    child = document.getElementById('child');
    child.onclick = childClickDOM0;
}

function parentClickDOM0(event) {
    var element;
    event = event || window.event;
    element = event.srcElement || event.target;
    log("Parent click DOM0, target id = " + element.id);
}

function childClickDOM0(event) {
    log("Child click DOM0, removing");
    this.parentNode.removeChild(this);
}

function go() {
}

var write = log;
function log(msg) {
    var log = document.getElementById('log');
    var p = document.createElement('p');
    p.innerHTML = msg;
    log.appendChild(p);
}

</script>
</head>
<body><div>
<div id='parent'><div id='child'>click here</div></div>
<hr>
<div id='log'></div>
</div></body>
</html>

    Test page using attachEvent/addEventListener handlers (via Prototype):

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js'></script>
<script type='text/javascript'>
document.observe('dom:loaded', pageInit);
function pageInit() {
    var parent, child;

    parent = $('parent');
    parent.observe('click', parentClick);
    child = $('child');
    child.observe('click', childClick);
}

function parentClick(event) {
    log("Parent click, target id = " + event.findElement().id);
}

function childClick(event) {
    log("Child click, removing");
    this.remove();
}

function go() {
}

var write = log;
function log(msg) {
    $('log').appendChild(new Element('p').update(msg));
}
</script>
</head>
<body><div>
<div id='parent'><div id='child'>click here</div></div>
<hr>
<div id='log'></div>
</div></body>
</html>
    • 0