jquery - 如何删除仅包含特定文本的动态 div

Question

我正在尝试创建一个下拉列表，为 SQL 报告创建器动态创建 div。

当选择一个选项时，它会创建一个具有该选项名称的 div 并将其正确附加到 div 中。我的问题是我不想要重复的 div。因此，如果已经创建了ID和文本为“Successful”的div，我不想添加它，我想先删除旧的，然后添加它。就目前而言，唯一不起作用的部分是:

 $("div").remove(divcnt);

这不会删除与所选 div 具有相同 ID 的 div。

有什么建议吗？

fiddle : https://jsfiddle.net/gmggq67o/

$('#rp_status').on('change', function() {
  var divcnt = $(this).val();
  if (divcnt === 'All') {
    $("div").remove('.sselection');
    var $div = $("<div></div>", {
      id: "sall",
      class: "sselection status",
      text: divcnt
    });
    $("#status_selections").append($div);
  } else {
    $("div").remove(divcnt);
    $("div").remove("#sall");
    var $div = $("<div></div>", {
      id: divcnt,
      class: "sselection status",
      text: divcnt
    });
    $("#status_selections").append($div);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rp_item">
  <div class="rp_item_hdr">Status</div>
  <div class="rp_item_cnt">
    <select name="status" id="rp_status">
      <option selected disabled hidden style='display: none' value=''></option>
      <option>All</option>
      <option>New</option>
      <option>In Progress</option>
      <option>Successful</option>
      <option>On Hold</option>
      <option>Failed</option>
    </select>
  </div>
  <div class="report_selections" id="status_selections">
    <h5>Selections</h5>
    <div id="sall" class="sselection status">All</div>
  </div>
</div>

Answer 1

您的代码尝试查找具有给定名称的标签。要通过 id 属性进行选择，您需要添加哈希前缀:

$("div").remove("#" + divcnt);

但请注意，当 divcnt 有空格时，这不起作用，因为 HTML id 属性不允许有空格，并且选择器将以不同的方式解释。因此，请改用自定义属性，或使用 [ ] 选择器语法:

$("div").remove('[id="' + divcnt + '"]');