如何实现双击删除DOM中指定单张图片？DogAPI狗狗拼贴画功能实现问题

修复步骤 #

1. 修正类名添加错误
   你当前代码里给图片加类时多写了选择器前缀.，addClass()方法直接传入纯类名即可：

// 错误写法
dogImgs.addClass(".dogPic")
// 正确写法
dogImgs.addClass("dogPic")

2. 用事件委托实现单张双击删除，完全规避重复ID问题
   不需要给每个图片设置ID，直接给父容器绑定事件委托，只会删除用户当前双击的那张图片，后续新增的图片也会自动支持删除功能，不用重复绑定事件：

// 这段代码直接加在全局即可，不需要放在其他函数里
$('.slideshow').on('dblclick', 'img', function() {
  // 仅删除被双击的当前图片
  $(this).remove();
})

修正后完整JS代码 #

// 全局绑定双击删除事件委托
$('.slideshow').on('dblclick', 'img', function() {
  $(this).remove();
})

// 拉取犬种列表，出错时提示
async function start() {
    try {
        const response = await fetch("https://dog.ceo/api/breeds/list/all")
        const data = await response.json()
        breedList(data.message)
    } catch (e) {
        console.log("拉取犬种列表失败")
        alert("拉取犬种列表失败")
    }
}

// 初始化加载犬种下拉菜单
start()
function breedList(dogList) {
    document.getElementById("breeds").innerHTML = `
    <select onchange="loadByBreed(this.value)">
        <option>选择犬种</option>
        ${Object.keys(dogList).map(function (breed) {
        return `<option>${breed}</option>`
    }).join('')}
    </select>
    `
}

// 按选择的犬种拉取图片
async function loadByBreed(breed) {
    if (breed != "选择犬种") {
        const response = await fetch(`https://dog.ceo/api/breed/${breed}/images`)
        const data = await response.json()
        createImgs(data.message)
    }
}

// 随机生成图片并追加到容器
function createImgs(images) {
    let imageContainer = $(".slideshow");
    let dogImgs = $('<img>');
    dogImgs.attr("src", images[Math.floor(Math.random() * images.length)]);
    // 已修正类名写法
    dogImgs.addClass("dogPic")
    imageContainer.append(dogImgs);
}

内容的提问来源于stack exchange，提问作者RDX10290