我有一份表單
因功能需求
做了一排一樣功能的按鈕(刪除)

<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">

這些按鈕都各自在旁邊也配了圖片
目的是要可以單獨刪除圖片(含按鈕本身)
最外層再放個div包起來~

<div id="imgDiv">

    <img src="01.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(1)">

    <img src="02.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(2)">

    <img src="03.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(3)">

    <img src="04.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(4)">

</div>

以上都用name的方式命名
以方便用document.getElementsByName("name")[index]的方式
取得其相關的值或是功能(刪除)

下面是他的刪除功能

function imgDeleteFunc(num) {
    var parent = document.getElementById("imgDiv");
    var childTag = document.getElementsByName("imgTag");
    var childDelBtn = document.getElementsByName("imgDeleteBtn");
    parent.removeChild(childTag[num]);
    parent.removeChild(childDelBtn[num]);
}

上面的function我知道一定會出問題
因為..
我只要刪除第一組或中間任一組..
最後一組的圖片和按鈕刪除時就會出現異常
原因是..
物件刪除後..
排序變更了..
但按鈕本身的事件參數沒變..
導致最後一個4點了會找不到4的索引..

我想要每個按鈕在點擊時..
可以取得他自己目前的索引值..
而不是像我現在這樣設固定的~
請問該怎麼做呢?

補充:
事實上..
我可以在事件上放上this表示當下點擊物件..
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(this)">
Function可以改成..

function imgDeleteFunc(obj) {
    var parent = document.getElementById("imgDiv");
    
    parent.removeChild(obj);
}

如此修改..
可以不受index影響刪除自己(刪除按鈕自己)
但imgTag該怎麼刪除呢?
我只想到用index控制..
才會有上面的問題= =