JavaScript 如何删除孩子

JavaScript How to remove a child

本文关键字：删除 孩子 何删除 JavaScript      更新时间：2023-09-26

使用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);
}

document.body.removeChild(toDelete);

我想你忘了给你正在创建的图像一个ID。

您正在使用：

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

若要获取要删除的映像，但从不将该 ID 分配给映像。要在制作映像时添加 ID，请使用以下任一方法：

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

或 

img.id = 'image23'

编辑

如果您允许添加多个图像，并且一次只想删除一个图像，那么我认为樱心馆评论的方法可能更理想，但是而不是抓住：

document.getElementsByTagName("IMG")[0]

你应该使用一个类，以防你的页面上有其他图像。

这将使您的新添加：

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

而你的新删除我：

var toDelete = document.getElementsByClassName("deletebybutton")[0];
toDelete.parentNode.removeChild(toDelete);
相关文章：