为什么我的子节点没有被清空？

Question

我有这段代码可以过滤输入并将它们分别显示为弹出窗口中的按钮，但是每次 keyup 事件发生时，搜索应该清空列表并附加新列表；相反，它只是继续附加到列表中。

我试过使用empty()，但没有清空。我什至尝试过 html() 和 html('')，但没有成功。

我的html:

<div class="related-widget-wrapper">
    <select id="id_user" name="user" required="">
        <option value="" selected="selected">---------</option>
        <option value="3">abc</option>
        <option value="1">admin</option>
        <option value="2">hello</option>
    </select>
</div>

我的js：

var filterInput = '<input type="text" id="customFilter" placeholder="Filter" />';
var filterPopUp = '<div class="filterPop" style="border: 1px solid #000; min-height: 100px; min-width: 200px; display: none; position: fixed; left: 50%; top: 50%;"></div>';
var newList = "";
$("#id_user")
    .closest(".related-widget-wrapper")
    .append(filterInput, filterPopUp);

$("#customFilter").on("keyup", function() {
    $(".filterPop").empty();
    var input = $(this).val();
    $(".filterPop").show();

    $.each($("#id_user option"), function() {
        var index = $(this).val();
        var val = $(this).text();
        if (val.toLowerCase().indexOf(input) >= 0) {
            newList += '<p class="lists"><button class="filteredList" data-filteredID="' + index + ' value="' + val + '">' + val + "</button></p>";
        }
    });

    $(".filterPop").append(newList);
});

我没有手动将 input 字段输入到 html 中，因为我的框架不允许这样做。

谁能给我一些额外的眼睛？

提前致谢。

Answer 1

而不是 $('#customFilter').on(...) 尝试 $(filterInput).on(...).

当元素在文档中没有父元素时，jquery 将找不到它。

Answer 2

您正在 keyup 上连接到 newList。您需要在 keyup 上清空 newList，然后在 $.each() 循环中连接。

var filterInput = '<input type="text" id="customFilter" placeholder="Filter" />';
var filterPopUp = '<div class="filterPop" style="border: 1px solid #000; min-height: 100px; min-width: 200px; display: none; position: fixed; left: 50%; top: 50%;"></div>';
$('#id_user').closest('.related-widget-wrapper').append(filterInput, filterPopUp);

$('#customFilter').on('keyup', function() {
  $('.filterPop').empty();
  var input = $(this).val();
  $('.filterPop').show();
  var newList = '';

  $.each($('#id_user option'), function() {
    var index = $(this).val();
    var val = $(this).text();
    if (val.toLowerCase().indexOf(input) >= 0) {
      newList += '<p class="lists"><button class="filteredList" data-filteredID="' + index + ' value="' + val + '">' + val + "</button></p>";
    }
  });

  ($('.filterPop').append(newList));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="related-widget-wrapper">
    <select id="id_user" name="user" required="">
        <option value="" selected="selected">---------</option>
        <option value="3">abc</option>
        <option value="1">admin</option>
        <option value="2">hello</option>
    </select>
</div>

为什么我的子节点没有被清空？

Why aren't my child nodes getting emptied?

html

javascript

jquery