title: fabricjs removing objects (line) from canvas but not all objects are getting removed
body: <p>I am relatively new to fabricjs.
  I am creating a grid on the canvas with fabricjs(1.7.11), </p>
  
  <p>What I am trying to achieve: </p>
  
  <p>basically, when I click a button a grid is created and when I click another button I want to delete the grid ( the grid is made of fabricjs lines) but for some reason, not all lines are getting removed.</p>
  
  <p>function to create the grid</p>
  
  <pre><code>var grid = 30;
  var cWidth = canvas.getWidth();
  
  function CanvasGrid(){
      for(var i = 0; i &lt; (cWidth / grid); i++){
          canvas.add(new fabric.Line([i * grid, 0, i * grid, cWidth], {
              stroke: '#ccc',
              selectable: false
          }));
  
          canvas.add(new fabric.Line([0, i * grid, cWidth, i * grid], {
              stroke: '#ccc',
              selectable: false
          }));
      }
  }
  </code></pre>
  
  <p>Created grid on canvas:</p>
  
  <p><a href="https://imgur.com/a/U1bD7" rel="nofollow noreferrer">http://imgur.com/a/U1bD7</a></p>
  
  <p>function to delete grid:</p>
  
  <pre><code>function RemoveGrid(){
      var objects = canvas.getObjects('line');
      for(var i = 0; i &lt; objects.length; i++){
          canvas.item(i).remove();        
      }   
      RenderCanvas();
  }
  </code></pre>
  
  <p>Result: </p>
  
  <p><a href="https://imgur.com/a/vPmMa" rel="nofollow noreferrer">http://imgur.com/a/vPmMa</a></p>
  
  <p>I want to remove the rest of the lines. Any help much appreciated. </p>
  
  <p>Thank you.</p>
  
  <p>edit: 
  I tried this solution but I have to keep clicking on the button till all lines are removed.</p>
  
  <pre><code>function RemoveGrid(){
      canvas.forEachObject(function(obj){
          if(obj.type === 'line'){
              obj.remove();
          }
      });
  
      RenderCanvas();
  }
  </code></pre>
  
  <p>Any help much appreciated. Thanks</p>