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>
<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"}
]
Similar Reads
Backbone.js reset Collection
The Backbone.js reset Collection is used to replace the whole list of models with a new list of models or attributes hash. This function returns newly set models in the collection. We can pass null in place of models to make the collection empty. Syntax:Â collection.reset( models, options ); Paramet
2 min read
Backbone.js model Collection
The Backbone.js model Collection is the property that specifies the model collection. If this property is defined then we can pass objects, an array of objects, and uses options add, create and reset then the attributes will be converted into a model of the proper type using provided options. Syntax
2 min read
Backbone.js models Collection
The Backbone.js models Collection is used to access the JavaScript array of models inside the collection. The model object can be accessed with the use of 'get' or 'at' but we can use models to direct reference to the array. Syntax: collection.models; Parameters: It doesn't take any parameters. Ex
2 min read
Backbone.js parse Collection
The Backbone.js parse Collection is a method that is called by Backbone whenever a Collection's models are returned by the server. The default implementation simply passes the JSON response. We can override it with a new logic to flexibly parse the response. Syntax: collection.parse( response , op
2 min read
Backbone.js modelId Collection
The Backbone.js modelId Collection is used to uniquely identify the models in the collection. By default, Collection uses idAttribute value of Model to identify the models. We can override our modelId function whose return value will be used by the collection to uniquely identify the Models. Syntax:
2 min read
Backbone.js where Collection
In this article, we will discuss Backbone.js where collection. The Backbone.js is where the collection is used to retrieve and return the model with the specified matched attribute in the given model array of collection. Syntax: Backbone.Collection.where(attribute) Parameters: It will take only one
3 min read
Backbone.js pop Collection
In this article, we will discuss pop collection The Backbone.js pop collection is used to remove a model or an array of models from the given collection. It is similar to the remove method. Syntax: collection.pop(models,options) Parameters: It will take two parameters. models: this is the first para
3 min read
Backbone.js set Collection
The Backbone.js set collection is used to update a model or an array of models in the given collection. If the model is not there, then it will create a model with given values, Syntax: collection.set(models,options) Parameters: It will take two parameters. models: This is the first parameter which
3 min read
Backbone.js url Collection
The Backbone.js url Collection is the property or function of a collection which is the reference to the location where the data in the server is located. The url property of collection is used by all the models of collection to construct the url to fetch the data. Syntax: collection.url or collec
2 min read
Backbone.js Collections
A Backbone.js Collections are a group of related models. It is useful when the model is loading to the server or saving to the server. Collections also provide a helper function for performing computation against a list of models. Aside from their own events collections also proxy through all of the
2 min read