Backbone.js remove Collection

0 0 2 minutes read

In this article, we will discuss Backbone.js removing the collection. The Backbone.js remove collection is used to remove a model or an array of models from the given collection.

Syntax:

collection.remove(models,options)

Parameters: It will take two parameters.

models: this is the first parameter that is used to specify the names of the instances,
options: this parameter takes the model type which will be removed from the given collection.

Example 1: In this example, we will create a model Food and remove food1 using the remove.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Example of Backbone.js</title>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
            type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"></script>
    <script type="text/javascript">  
         // 'Food' is a model and that contains the
         // default value for the  model  
         var Food = Backbone.Model.extend({  
            defaults: {  
               food_name: "Butter",  
               food_region:"Hyderabad"  
            }  
         });  
   
         // Here the  'FoodCollection' is a collection instance and model
         // 'Food' is specified by overriding the 'model' property  
         var FoodCollection = Backbone.Collection.extend({  
            model: Food  
         });  
   
         // The instances "food1" and "food2" are created 
           // for the model "Food"
         var food1 = new Food({name: "Icecream",  
                               country:"Hyderabad"});  
         var food2 = new Food({name: "cake/chocos",  
                               country:"Guntur"});  
   
         // The add() method adds the models 'food1' and 'food2' to 
         // the collection instance 'final'  
         var final = new FoodCollection();  
         final.add([food1,food2]);  
   
         // Get the count of total food using length  
         document.write('Actual Food Count : ' + 
                        final.length);  
         document.write("<br>");  
   
         // Remove food1 model using remove  
         final.remove([food1]);  
         document.write('Removed Food Count : ' + 
                        final.length);  
      </script>  
</head>
 
<body></body>
 
</html>

Output:

Actual Food Count : 2
Removed Food Count : 1

Example 2: In this example, we will create a model Food and remove food1 and food3 using the remove:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Example of Backbone.js remove</title>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
            type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"></script>
    <script src=
            "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        // 'Food' is a model and that contains the 
        // default value for the  model  
        var Food = Backbone.Model.extend({
            defaults: {
                food_name: "Butter",
                food_region: "Hyderabad"
            }
        });
 
        // Here the  'FoodCollection' is a collection instance and model 
        // 'Food' is specified by overriding the 'model' property  
        var FoodCollection = Backbone.Collection.extend({
            model: Food
        });
 
        // The instances "food1","food2" and "food3" are
        // created for the model "Food"  
        var food1 = new Food({
            name: "Icecream",
            country: "Hyderabad"
        });
        var food2 = new Food({
            name: "cake/chocos",
            country: "Guntur"
        });
        var food3 = new Food({
            name: "drinks",
            country: "Guntur"
        });
 
        // The add() method adds the models 'food1' and 
        // 'food2' to the collection instance 'final'  
        var final = new FoodCollection();
        final.add([food1, food2, food3]);
 
        // get the  food using toJSON  
        document.write('Actual Food : ' +
            JSON.stringify(final.toJSON()));
        document.write("<br>");
        document.write("<br>");
 
        // Remove food1 and food3 model using remove  
        final.remove([food1, [food3]]);
 
        // Get the  food using toJSON  
        document.write('After Removal of food1 and food3 : ' +
            JSON.stringify(final.toJSON())); 
    </script>
</head>
 
<body></body>
 
</html>

Output:

Actual Food : [
    {"name":"Icecream","country":"Hyderabad",
        "food_name":"Butter","food_region":"Hyderabad"},
    {"name":"cake/chocos","country":"Guntur",
        "food_name":"Butter","food_region":"Hyderabad"},
    {"name":"drinks","country":"Guntur",
        "food_name":"Butter","food_region":"Hyderabad"}
]

After Removal of food1 and food3 : [
    {"name":"cake/chocos","country":"Guntur",
        "food_name":"Butter","food_region":"Hyderabad"},
    {"name":"drinks","country":"Guntur",
        "food_name":"Butter","food_region":"Hyderabad"}
]

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!