JavaScript 如何移除一個孩子

Question

使用javascript，我添加了兩個按鈕，一個將添加圖片，另一個將刪除圖片。 我只是在准備考試...

添加圖片的按鈕和功能很好用，我正在為刪除圖片的功能而苦苦掙扎。 如果我將兩個按鈕和圖片添加到網站，並為圖片添加一個id，並通過該id刪除該圖片。 但是如果我只有兩個按鈕並嘗試開始添加圖片，那么我將沒有ID，所以我迷路了！

下面的 deleteMe 函數可以很好地刪除第一張圖片。 但是我在加載網站時不想有任何圖片，我只想有兩個按鈕來添加和刪除。 所以我不知道如何刪除元素。 到目前為止，這是我對這兩個功能的了解，謝謝！！！：

function deleteMe(){
    var toDelete = document.getElementById('image23');
    toDelete.parentNode.removeChild(toDelete);
}

function addMe(){

    var img = document.createElement('IMG');
    img.setAttribute("src", "elephant.jpg");
    img.setAttribute("width", "60");
    img.setAttribute("height", "60");
    document.body.appendChild(img);

}

Answer 1

document.body.removeChild(toDelete);

Answer 2

我想你忘了給你正在創建的圖像提供一個 ID。

您正在使用：

var toDelete = document.getElementById('image23');

要獲取您要刪除的圖像，但您永遠不會將該 id 分配給圖像。 要在制作圖像時添加 ID，請使用：

img.setAttribute("id", "image23");

或者

img.id = 'image23'

編輯

如果您允許添加多個圖像，並且只想一次刪除它們，那么我認為 sakurashinken 評論的方法可能更理想，但不是通過以下方式抓取：

document.getElementsByTagName("IMG")[0]

您應該使用一個類，以防您的頁面上有其他圖像。

這將使您的新 addMe：

...
img.setAttribute("src", "elephant.jpg");
img.className = 'deletebybutton';
img.setAttribute("width", "60");
...

還有你的新 deleteMe：

var toDelete = document.getElementsByClassName("deletebybutton")[0];
toDelete.parentNode.removeChild(toDelete);