JavaScript

刚学没多久，怎么在这个代码的基础上完成最后一张图的要求，求解

img

img


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h2>喜欢的水果</h2>
        <input type="button" value="删除图片" onclick="delImg()"/>
        <input type="file"  value="替换图片" onchange="changeImg()" id="fileBtn"/>
        <img src="img/12.png" id="img1">
        <img src="img/22.png" id="img2">
        
        <script type="text/javascript">
            var img1=document.getElementById('img1')
            var img2=document.getElementById('img2')
            var fileBtn=document.getElementById('fileBtn')
            function delImg(){
                img1.remove()
            }
            function changeImg(){
                if(fileBtn.value==''){
                    img2.src='img/22.png'
                }
                else{
                    img2.src=window.URL.createObjectURL(fileBtn.files[0])//获取file选择图片的路径
                }
            }
        </script>
    </body>
</html>

你要的应该是这种效果吧！ 写了个简单的，实现了下本地效果，但是不够严谨，没有加验证

如果用jquery,可以$('img:first').remove();
$('img:firts').attr(src,$('img:last').attr('src'));

删除 就是 remove 元素 。 替换就是 img src的赋值