Why aren't my child nodes getting emptied?

I have this code that filters inputs and shows them each as a button in a pop-up, but each time the keyup event occurs, the search should empty the list and append the new list; instead it just keeps on attaching to the list.

I have tried using empty(), but it's not emptying. I have even tried html() and html(''), but no luck.

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

My 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);
});

I am not entering the input field into the html manually, because my Framework does not allow it.

Can someone give me some extra eyes?

Thanks in advance.

Answers 1

  • You're concatenating to newList on keyup. You need to empty out newList on keyup then concatenate in the $.each() loop.

    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>


Related Articles