訪問內部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元素並刪除它們

回答

相關問題