h5删除图片代码怎么写

以下是一个简单的H5删除图片的示例代码：

HTML部分:

<div id="image_container">
  <img id="image" src="yourImage.jpg" />
  <button id="delete_button">删除图片</button>
</div>

JavaScript部分:

//获取需要操作的DOM元素
const imageContainer = document.getElementById("image_container");
const image = document.getElementById("image");
const deleteButton = document.getElementById("delete_button");

//添加事件监听器，点击删除按钮时移除图片元素
deleteButton.addEventListener("click", function(){
  imageContainer.removeChild(image);
});

当用户点击"删除图片"按钮时，该代码会删除包含图片和按钮的`<div>`元素。如果要仅仅删除图片，而保留其容器，只需要改变`removeChild`函数所作用的元素。

相关问题

h5动态添加和删除图片代码怎么写

以下是h5动态添加和删除图片代码示例：

添加图片代码：

<input type="file" id="fileInput">

<script>
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function(e) {
var file = e.target.files[0];
var img = document.createElement("img");
img.src = URL.createObjectURL(file);
document.body.appendChild(img);
});
</script>

这段代码创建了一个文件选择框，并监听了其change事件。当用户选择文件后，通过URL.createObjectURL()方法生成一个图片URL，然后创建一个img元素并将其添加到body中。

删除图片代码：

<img src="example.jpg" id="img1">
<img src="example2.jpg" id="img2">
<button onclick="deleteImage()">删除图片</button>

<script>
function deleteImage() {
var img = document.getElementById("img1");
img.parentNode.removeChild(img);
}
</script>

这段代码创建了两个img元素以及一个按钮。当用户点击按钮时，deleteImage()函数会被调用。该函数通过getElementById()方法获取到要删除的元素，并使用parentNode.removeChild()方法将其从DOM中删除。