Unable to clear the array using jquery

Question

I am trying to remove all the elements of the array using array = []; when the div value becomes 'clear all' but the array is not able to clear. All i am doing here is including the selected checkbox value in the div called 'filtervalue'.

here is the script

<script type="text/javascript">
    $('.filtercheck, #location, #sorting , #filtervalue').on('click', function(e) {
      var parameter = [];
      var filter = [];
      var index = "";
      var HTML = "";
      var newHTML = "";

      $(".filtercheck").each(function() {
        if (this.checked) {
          filter.push($(this).val())
          parameter.push(this.name + "=" + $(this).val());
        }
      });

      if ($("#location").val()) {
        parameter.push($("#location").val());
      }

      if ($('#sorting').val()) {
        parameter.push($('#sorting').val());
      }


      for (var i = 0; i < filter.length; i++) {
        HTML = HTML + '<div>' + filter[i] + '</div>';
      }

      newHTML = HTML + '<div>' + 'Clear All' + '</div>'
      $('#filtervalue').html(newHTML).show();

      if (filter.length == 0) {
        $('#filtervalue').hide();
      }


      $('div#filtervalue>div').each(function() {
        $(this).on("click", function() {
          text = ($(this).text());

          if (text == 'Clear All') {
            filter = [];
            console.log(filter.length)
            parameter = [];
            console.log(parameter.length)
            $('#filtervalue').hide();
          } else {
            filter = jQuery.grep(filter, function(n) {
              return n != text;
            });

            console.log(filter)
            console.log(parameter)

            checkbox = $(":checkbox[value=" + text + "]")

            if (checkbox.prop("checked", true)) {
              checkbox.prop("checked", false);
              $(this).remove();
            }
          }
        });

      });

      parameter = parameter.join('&');
      $('#loading-image').show();
      console.log(filter)
      console.log(parameter)

      $.ajax({
        url: '{{ instance.get_absolute_url }}',
        type: 'GET',
        data: parameter,
        success: function(data) {
          var a = $(data).find('.prodthumb');
          $('.productgrid').html(a);
          $("img.lazy").lazyload();
        },
        error: function(e) {
          console.log(e.message);
        },

        complete: function() {
          $('#loading-image').hide();
        }
      });

    });
</script>

How can i remove all the elements of the array? Thank you

`How can i remove all the elements of the array?` if the array is called `array`, you can simply write `array = [];`, or even `array = null` (but then if you want to use array functions on array, you need to make it an array again) — Jaromanda X, Jan 25 '16 at 13:09
Possible duplicate of [How do I empty an array in JavaScript?](http://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript) — StudioTime, Jan 25 '16 at 13:12
I have a feeling it is a logic error since you seem to be setting it to `filter = []`. Too much code for me to go through this early in the morning. — epascarello, Jan 25 '16 at 13:15
if filter = [] is not working, then it may be possible that it is not entering the if loop. Have you checked if the text value is actually 'Clear All' and is it entering the if loop? — P. Jairaj, Jan 25 '16 at 13:16

score 0 · Answer 1 · answered Jan 25 '16 at 13:17

Please check with below code. just move your variable declaration at top like below.

var parameter = [];
    var filter = [];
    var index = "";
    var HTML = "";
    var newHTML = "";

    $('.filtercheck, #location, #sorting , #filtervalue').on('click', function(e) {   

      $(".filtercheck").each(function() {
        if (this.checked) {
          filter.push($(this).val())
          parameter.push(this.name + "=" + $(this).val());
        }
      });

      if ($("#location").val()) {
        parameter.push($("#location").val());
      }

      if ($('#sorting').val()) {
        parameter.push($('#sorting').val());
      }


      for (var i = 0; i < filter.length; i++) {
        HTML = HTML + '<div>' + filter[i] + '</div>';
      }

      newHTML = HTML + '<div>' + 'Clear All' + '</div>'
      $('#filtervalue').html(newHTML).show();

      if (filter.length == 0) {
        $('#filtervalue').hide();
      }


      $('div#filtervalue>div').each(function() {
        $(this).on("click", function() {
          text = ($(this).text());

          if (text == 'Clear All') {
            filter = [];
            console.log(filter.length)
            parameter = [];
            console.log(parameter.length)
            $('#filtervalue').hide();
          } else {
            filter = jQuery.grep(filter, function(n) {
              return n != text;
            });

            console.log(filter)
            console.log(parameter)

            checkbox = $(":checkbox[value=" + text + "]")

            if (checkbox.prop("checked", true)) {
              checkbox.prop("checked", false);
              $(this).remove();
            }
          }
        });

      });

      parameter = parameter.join('&');
      $('#loading-image').show();
      console.log(filter)
      console.log(parameter)

      $.ajax({
        url: '{{ instance.get_absolute_url }}',
        type: 'GET',
        data: parameter,
        success: function(data) {
          var a = $(data).find('.prodthumb');
          $('.productgrid').html(a);
          $("img.lazy").lazyload();
        },
        error: function(e) {
          console.log(e.message);
        },

        complete: function() {
          $('#loading-image').hide();
        }
      });

    });

No effect it still behaves the same – asing177 Jan 26 '16 at 17:33 — asing177, Jan 26 '16 at 17:33

Unable to clear the array using jquery

1 Answers1