Second call to a defined function doesn't work

Question

This is my first time posting here, although I've browsing for a long time. Saying that, I hope not to breach any regulations etc. Anyway, ad rem:

I'm writing this piece of jQuery code, which populates the wrapper div with a lot of small divs, creating a grid. It all works fine at the beginning, I created a function for that and the first call to it works fine. But then, when I use a button with a click() event handler, I want to call the function again and re-populate the grid with divs of different size - this is where it stops working. Here's my code:

 $(document).ready(function () {

      var size = 16;
      var def_width = 960;
      var def_height = 640;

      var populate = function (size) {
          $('.square').empty();
          for (var i = 0; i < size * size; i++) {
              var $sq = $("<div class='square'></div>");
              $('.wrapper').append($sq)
          };
          return $('.wrapper')
      };

      populate(size);

      $('.square').hover(function () {
          $(this).css('background-color', 'black');
      }, function () {
          $(this).css('background-color', 'white');
      });

      $('#reset').click(function () {
          var new_size = prompt('Please enter a new amount of squares');
          var new_width = def_width / new_size;
          var new_height = def_height / new_size;

          $('.square').css('width', new_width + 'px');
          $('.square').css('height', new_height + 'px');
          populate(new_size);
      });

The second call to the populate() function doesn't seem to work - the grid still has 256 squares, which are smaller, so they do not fill the grid completely.

Answer 1

You are emptying the wrong element, it should be $('.wrapper').empty(); not $('.square').empty();

If you empty the square divs, then it will kill all element within the square divs which are empty to begin with but it does not remove them. Then you proceed to add more squares. If you run empty on the wrapper then it will remove all the pre-existing square divs in wrapper and you can add your new square divs

  var populate = function (size) {
      $('.wrapper').empty();
      for (var i = 0; i < size * size; i++) {
          var $sq = $("<div class='square'></div>");
          $('.wrapper').append($sq)
      };
      return $('.wrapper')
  };

Not sure why you are returning $('.wrapper') in this function but I left it in there in case there are other codes using it

Answer 2

Okay, I was under the impression that empty() removes all the elements with that selector. So after I changed it to .square, it leaves me with a completely empty wrapper div. Before, it changed the size of squares, so that they didn't fill the grid, buy they were still in there. Right now it goes like this: I start with a 16x16 grid of divs. I need to change that, when the user inputs a new amount of squares in the side, so that it is 64x64 for example.

I wasn't sure about returning wrapper also, I added that when I was still fighting to get that function to work. It seemed to work, so I left it there. I'm new to jQuery and JS in general, so there might be other mistakes, but right now I need to focus on the desired result. Thanks for quick answers by the way!