Question

我尝试创建一个为sql报告创建者动态创建div的下拉列表。

选择一个选项时，它会创建一个带有该选项名称的div，并将其正确地附加到div。我的问题是我不想要重复的div。因此，如果一个div的ID和文本为＆＃34;成功＆＃34;已经创建，我不想添加它，我想首先删除旧的，然后添加它。就目前而言，唯一不起作用的部分是：

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

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

有什么建议吗？

小提琴： https://jsfiddle.net/gmggq67o/

＆＃13;

$('#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);
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

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

Answer 2

您的第一个问题是因为您的option元素值在生成的id属性中有空格无效。您可以使用data属性来包含要用作新内容的id的值来解决此问题。或者，您可以通过正则表达式运行该值以自动删除空格;它只取决于你需要多少控制值。

其次，由于只能选择一个项目，因此只需在添加remove()之前擦除div内的所有#status_selections元素，就可以使$('#rp_status').on('change', function() { var $container = $('#status_selections'); $container.find('div').remove(); $container.append('<div id="' + $(this).find('option:selected').data('id') + '" class="sselection status">' + this.value + '</div>'); });调用更通用。试试这个：

＆＃13;

<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 style="display: none" value=""></option>
      <option data-id="sall">All</option>
      <option data-id="new">New</option>
      <option data-id="inprogress">In Progress</option>
      <option data-id="successful">Successful</option>
      <option data-id="onhold">On Hold</option>
      <option data-id="failed">Failed</option>
    </select>
  </div>
  <div class="report_selections" id="status_selections">
    <h5>Selections</h5>
    <div id="sall" class="sselection status">All</div>
  </div>
</div>

＆＃13;

#icon {
background-image: url(../images/example_default.png)
width: 150px;
height: 150px;
position: absolute;
}

#icon: hover {
background-image: url(../images/example_hover.png)
width: 150px;
height: 150px;
position: absolute;
cursor: pointer;
}

＆＃13;

如何仅删除具有特定文本的动态div

2 个答案: