Backbone.js remove Collection
Last Updated :
21 Jun, 2022
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"}
]
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...