javascript - 如何在元素的父级中找到一个元素

Question

我有以下html代码：

<div class=imgHolder>
      <img src="some address"/>     
       <a class="del" onClick="function">delete</a>
</div>

如何通过纯java脚本在父级中找到图像标签

Answer 1

Javascript：

function clickFunc(e){

var tgt = e.target;
var parent = tgt.parentNode;
var img = parent.getElementsByTagName("img")[0];

parent.removeChild(img);
}

HTML：

<div class=imgHolder>
    <img src="some address"/>     
    <a class="del" onClick="clickFunc">delete</a>
</div>

我试图把它写成不言自明的，但要经过：

1. e是点击事件。
2. e.target是用户点击的内容（你的锚标签）
3. parent是锚的父节点。
4. img是父节点中的第一个图像。
5. img从中删除parent。

Answer 2

<div class=imgHolder>
  <img src="some address"/>     
   <a href="javascript:void();" class="del" onclick="deleteThis(this);">delete</a>
</div>

脚本：

function deleteThis(sender){
    var childs = sender.parentNode.childNodes;
    for (var i = 0; i < childs.length; i++){
        if (childs[i].tagName === 'img')
            alert(childs[i].src);
    }
}

或者，如果您确定img将始终在链接之前。

function deleteThis(sender){
    if (sender.previousSibling.tagName === 'img')
       alert(sender.previousSibling.src);
}