如何使用jQuery通过select下拉选项删除动态生成的对应div元素

现有问题梳理 #

• 事件绑定语法错误：混淆了$(document).ready()页面加载回调和事件委托的写法
• 类名引用错误：你的目标div类名为item_div，不是代码里写的img_div
• 不需要额外做值对比：select的选中值直接对应目标div的id属性，可直接用于元素选择

修改后的删除功能代码 #

// 页面加载完成后执行
$(document).ready(function() {
  // 事件委托绑定删除按钮点击事件，兼容动态生成的按钮
  $(document).on('click', '#rmvBtn', function() {
    // 获取下拉框当前选中值，即为要删除的div的id
    const selectedVal = $('#selectOpt').val();
    // 选中对应id的div直接删除
    $('#' + selectedVal).remove();
    // 如果需要同步删除下拉框中对应的option，可加下面这行
    // $("#selectOpt option[value='" + selectedVal + "']").remove();
  })
})

可选优化：简化下拉选项生成代码 #

你原来生成option的代码可以简化为以下写法，效果完全一致：

const itemArray = $('.img_title').map(function() {
  return $(this).text();
}).get();
const itemOption = itemArray.map(val => `<option value="${val}">${val}</option>`).join('');
$('#selectOpt').append(itemOption);

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