访问内部HTML元素并删除它们

我有一个div图像：访问内部HTML元素并删除它们

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

，我要去当它选择删除这张图片。我发现选择通过听取各元素的onclick()：

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

注：ID是动态创建的（我简化了我的问题，在这个例子中）

我的问题是，当我点击图片选择它，updateSelectedElement()的图像被称为第一个，然后updateSelectedElement() div。 SelectedElement的最终值将为“0”，我不能选择该内部元素（例如修改或删除它）

我试图保存最大数量的ID，但它不起作用，因为如果我有一些其他元素的ID较低，我不能再选择它们。

来源

2015-11-03 Amir

的可能的复制[如何阻止事件传播与内联onclick属性？]（http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute） –

如果我理解正确，你说当你点击图片时，它最终注册点击div（因为图片毕竟是父div的一部分）。

解决这一问题的方法是：

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

和：

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

这将从DOM树传播到父元素无论您要访问停止点击。

但是，我真的建议你不要在这里使用“onclick”......它变得非常混乱和难以管理。相反，只是让一类“可移动”或东西给任何您想要的元素，然后在弹出一些jQuery的：

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

和

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

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

来源

2015-11-03 21:55:45

它工作正常:)非常感谢你 – Amir

加入event.stopPropagation();停止冒泡的DOM click事件：

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

jsFiddle example

来源

2015-11-03 21:48:52 j08691

对于IE：'window.event.cancelBubble = true' –

@AndrewMairose - 绝对。更新。 – j08691

它没有工作，我有同样的问题后，我将此行添加到我的功能 – Amir

你需要周围通过ID这样的，即具有updateSelectedElement？

，或者可以刚才在this传递到所选择的元素，并删除就像这个例子（我用的按钮，而不是图片，而是同一个概念）：

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/

来源

2015-11-03 21:52:49 Marc

实际上我需要它的ID，因为我要通过另一个按钮（div外部） – Amir

我已更新，因此您可以使用单独的按钮进行删除。只是一个想法。可能不是你需要的。 – Marc

这样的创意:) – Amir

你需要停止传播，像这样：

function updateSelectedElement(e) { 
 
\t e.stopPropagation(); 
 
\t 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>

来源

2015-11-03 22:07:54

访问内部HTML元素并删除它们

回答

相关问题