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> type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= 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> type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= 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, neveropen 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!
