Accessing inner HTML elements and delete them

Question

I have an image in a div:

<div id="elem-0" onClick="updateSelectedElement(0);">
  <img src="#" id="elem-1" onClick="updateSelectedElement(1);">
</div>

and I'm going to delete this image when it's selected. I detect selecting by listening to an onclick() of each element:

function updateSelectedElement(id) {
  // select the clicked element     
  SelectedElement = "#elem-" + id;
}

Note: IDs are created dynamically (I simplify my problem in this example)

My problem is that when I click on an image to select it, updateSelectedElement() of image is called first and then updateSelectedElement() of div. The final value of SelectedElement will be "0" and I can't select that inner element (to modify or delete it, for example)

I have tried to save the max number of IDs, but it doesn't work, because if I have some other elements with lower IDs, I can't select them anymore.

Possible duplicate of [How to stop event propagation with inline onclick attribute?](http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — Andrew Mairose, Nov 03 '15 at 21:52

j08691 · Answer 1 · 2015-11-03T21:50:15.267

2

Stop the click event from bubbling up the DOM by adding event.stopPropagation();:

function updateSelectedElement(id) {
    console.log(id)
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        window.event.cancelBubble = true // For IE
    }
}

jsFiddle example

edited Nov 03 '15 at 21:50

answered Nov 03 '15 at 21:48

j08691

204,283
31
260
272

1

For IE: `window.event.cancelBubble = true` – Andrew Mairose Nov 03 '15 at 21:49
it does't work , I have the same problem after I add this line to my function – Amir Khademi Nov 03 '15 at 22:00
Did you try the fiddle I posted? It works fine. Are you getting any errors in your page when changing the code? – j08691 Nov 03 '15 at 22:01
yes fiddle works fine ... I don't why it doesn't work on my codes ! – Amir Khademi Nov 03 '15 at 22:09
It's not working because the event object wasn't passed in the function parameters. I think in Chrome it will still work sometimes even without passing it, but in Firefox it certainly would break. You'd have to pass event both in the onclick() in the html, then accept it as a parameter in updateSelectedElement() – Logan Bentley Nov 03 '15 at 22:33

Marc · Answer 2 · 2015-11-03T22:03:29.557

0

Do you need to pass the ID around like that, i.e. with updateSelectedElement?

Or can you just pass in the this to the selected element, and delete like in this example (I used buttons instead of images, but same concept):

HTML:

<div>
    <button onclick="addToCache(this)">Do Delete 1</button>
</div>
<div>
    <button onclick="addToCache(this)">Do Delete 2</button>
</div>
...

JAVASCRIPT:

var deletionCache = []; //keep a cache of things to be deleted

function doDeleteCache() {
    for (var i = 0; i < deletionCache.length; i++) {
        elem = deletionCache[i];
        elem.parentNode.removeChild(elem);
    }
    deletionCache = [];
}

function addToCache(elem) {
    deletionCache.push(elem);
    elem.style.color = "red";
}

http://jsfiddle.net/3exn763w/2/

edited Nov 03 '15 at 22:03

answered Nov 03 '15 at 21:52

Marc

11,403
2
35
45

I need it's ID actually , since I'm going to delete it by another button (outside of the div) – Amir Khademi Nov 03 '15 at 21:55
I updated so you can delete with a separate button. Just a thought. Might not be what you need though. – Marc Nov 03 '15 at 22:04
such a creative idea :) – Amir Khademi Nov 03 '15 at 22:18

score 0 · Accepted Answer · answered Nov 03 '15 at 21:55

If I understand correctly, you are saying that when you click on the image, it ends up registering the click on the div (because, the image is after all a part of the parent div).

The way to solve this is:

<div id="elem-0" onClick="updateSelectedElement(event,0);">
  <img src="#" id="elem-1" onClick="updateSelectedElement(event,1);">
</div>

And:

function updateSelectedElement(event,id) {
 SelectedElement = "#elem-" + id;
 event.stopPropagation();
}

This will stop the click from propagating up the DOM tree to the parent elements of whatever you're trying to access.

However, I really recommend you don't use the "onclick" inline here... It gets so messy and tough to manage. Instead, just make a class "removable" or something for any of the elements you want, then pop in some jQuery:

<div>
  <img src="#" class="removable">
</div>

and

$(function(){
  $('.removable').click(updateSelectedElement);
});

function updateSelectedElement(event) {
   $(event.target).remove();
   event.stopPropagation();
}

score 0 · Answer 4 · answered Nov 03 '15 at 22:07

You need to stop propagation like so:

function updateSelectedElement(e) {
 e.stopPropagation();
 document.body.appendChild(document.createTextNode(e.target.id));
}

<strong>Click a label</strong><p>
<div id="elem-0" onClick="updateSelectedElement(event);">
  outside div<br>
  <div id="elem-1" onClick="updateSelectedElement(event);">inside div</div>
</div>

Accessing inner HTML elements and delete them

4 Answers4