javascriptユニークな属性を持つキャンバスから複数のオブジェクトを削除する

Question

私はファブリックjsを使用していて、グループの親アイテムを削除しようとするとアイテムのグループを削除しようとしています。以下は私のコードです。

jQuery(document).on('click', ".deleteBtn", function() { 
    if (canvas.getActiveObject()) { 
     var product_id = canvas.getActiveObject().get('product_id'); 
    } 
     var canvasObj = canvas.getObjects(); 

    for(var i = 0; i < canvasObj.length; i++){ 

     var objRef = canvasObj[i]; 

     var accessoryId = objRef.get('accessory_product_id'); 

     var product_type = objRef.get('product_type'); 

     if(accessoryId == product_id && product_type == "accessory"){ 
      canvas.remove(objRef); 
     } 

    } 
}); 

コードは、実際の作業が、除去し、他の二つの項目が適切に除去されてしようとアクティブオブジェクトであり、同じaccessoryIdとproduct_type親項目にすべてのアイテムを削除しないです。キャンバスには2つのアイテムしか残っていません。グループには5つの項目すべてがあります。それらは画像です。私は問題を見つけることができないので、助けてください。ありがとう！

HTMLコード

<div id="content-tab-3" class="visualiser-product-category content-tab active"> 
    <ul> 
     <li> 
      <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter_Spice.png" class="visualizer-product-img" alt="Placeholder" data-quantity="1" data-product_type="parent" data-product_id="343"> 
       <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Desk-Floral.jpg" class="hide accessory-343"> 
       <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Garland.jpg" class="hide accessory-343"> 
       <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Tabletop.jpg" class="hide accessory-343"> 
       <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Wreath.jpg" class="hide accessory-343"> 
     </li> 
    </ul> 
</div> 

Answer 1

こんにちは私はあなたがのアクティブなオブジェクトIDを取得しようあなたのコードに気づいたが、そこにアクティブなオブジェクトがあるかどうかに関係なく場合は削除し、ループに進んオブジェクト !! おそらく、それが問題の原因です。

jQuery(document).on('click', ".deleteBtn", function() { 

    //only if there is active object, do i delete objects 
    if (canvas.getActiveObject()) { 
     //get productId of active object 
     var product_id = canvas.getActiveObject().product_id; 

     //loop on the canvas objects 
     canvas.getObjects().forEach(function (object) { 

       if(object.accessoryId == product_id && object.product_type == "accessory"){ 
       canvas.remove(object); 
       } 
     });//end forEach 
    }//end if 
});//end 'click' 

希望に役立ちます、幸運：

は私がのforEach（）関数に例を示すが、アクティブなオブジェクトがある場合のみ オブジェクトを削除する続行するつもりです。