jQuery使用Select选项移除HTML元素

Question

我想通过使用<select>option来删除<div>元素，但问题是我的<option>和<div>是动态生成的，所以我不确定如何获得那些使用jQuery的，因为我没有使用它很多。

这是<div>的样子:

<div class='container'>
<div class='item_div' id='uniqueName1'>
<img src=''>
<p class='img_title'>'uniqueName1'</p>
</div>
<div class='item_div' id='uniqueName2'>
<img src=''>
<p class='img_title'>uniqueName2</p>
</div>
</div>

我可以看到在<select>选项名称，如uniqueName1uniqueName2。现在让我们说我选择option与名称uniqueName1，我想删除<div>与iduniqueName1后，我点击按钮。基本上父id和子<p>text是一样的。

这就是我如何得到options为select

let itemArray = [];
let item = Array.prototype.slice.call(document.getElementsByClassName('img_title')).map(function(x){return x.innerHTML});
for(let i = 0; i < item.length; i++) {
itemArray.push(item[i]);    
}
let itemOption = '';
for(let i = 0; i < itemArray.length; i++) {
itemOption += "<option value='" + itemArray[i] + "'>" + itemArray[i] + '</option>';
}
$('#selectOpt').append(itemOption);

删除项目:

$(document).ready('click', '#rmvBtn', function() {
if($('#selectOpt').val() === /*I'm not sure what goes here for comparison*/) {
$('.img_div').parent().remove() /*not sure if its correct too*/;
}
})

Answer 1

通过将selectoption值链接到要删除的元素的ID，您的删除代码变得简单:

$("#" + $("#selectOpt").val()).remove()

更新代码片段:

// build select automatically
$(".img_title").parent().each((i,e)=> $("#selectOpt").append("<option value='" + e.id + "'>" + e.id + "</option>"));
$(document).on('click', '#rmvBtn', function() {
// remove the related element
$("#" + $("#selectOpt").val()).remove();

// Also remove the selected option from the select
$("#selectOpt option:selected").remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='item_div' id='uniqueName1'>
<p class='img_title'>uniqueName1</p>
</div>
<div class='item_div' id='uniqueName2'>
<p class='img_title'>uniqueName2</p>
</div>
</div>
<select id="selectOpt"></select>
<button id="rmvBtn">remove</button>

Answer 2

1. 构建您的选项。如果您从您的.item_div元素

   构建它们，这甚至更容易。

   const divs = $(".item_div[id]")
   const options = divs.map((_, { id }) => $("<option>", {
   value: id,
   text: id
   })).toArray()
   $("#selectOpt").append(options)
   

   参见https://api.jquery.com/map/和https://api.jquery.com/jquery/#jQuery-html-attributes

2. 在点击

   时删除选中的选项

   $("#rmvBtn").on("click", () => {
   $(`#${$("#selectOpt").val()}`).remove()
   })
   

---

演示…

const divs = $(".item_div[id]")
const options = divs.map((_, { id }) => $("<option>", {
value: id,
text: id
})).toArray()
$("#selectOpt").append(options)
$("#rmvBtn").on("click", () => {
var id = $("#selectOpt").val()
$(`#${$("#selectOpt").val()}`).remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item_div" id="uniqueName1">
<img src="">
<p class="img_title">'uniqueName1'</p>
</div>
<div class="item_div" id="uniqueName2">
<img src="">
<p class="img_title">uniqueName2</p>
</div>
</div>
<select id="selectOpt"></select>
<button type="button" id="rmvBtn">Remove selected</button>