# Backbone.js Tutorial - 12 - (Collections) Adding and Removing Elements (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS2D-qtmonWC2jsGY7w%2F-MS2G7_BYACSXIgNG5OB%2FScreenshot_4.jpg?alt=media\&token=c071e78d-6495-4b92-80af-998427db31b6)

C:\Users\Administrator\Desktop\gulp\app.js

```
StudentModel = Backbone.Model.extend({
	defaults: {
		name: "unknown"
	}
});
StudientCollection = Backbone.Collection.extend({
	model: StudentModel
});
jQuery(document).ready(function($) {
	var jony = new StudentModel({name: "Lionel1",id: 1});
	var vicky = new StudentModel({name: "Lionel2",id: 2});
	var classones = new StudientCollection([jony, vicky]);
	displayCollectionContents("Two element:", classones);
});
function displayCollectionContents(string, collection) {
	console.log(string + " " + JSON.stringify(collection.toJSON()));
}
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS2GCjygo4CE6SnCJIk%2F-MS2GgDAB3GhhFCPZKc9%2FScreenshot_5.jpg?alt=media\&token=7c99f966-4770-4da3-b19f-8b333e9ccd5a)

C:\Users\Administrator\Desktop\gulp\app.js

```
StudentModel = Backbone.Model.extend({
	defaults: {
		name: "unknown"
	}
});
StudientCollection = Backbone.Collection.extend({
	model: StudentModel
});
jQuery(document).ready(function($) {
	var jony = new StudentModel({name: "Lionel1",id: 1});
	var vicky = new StudentModel({name: "Lionel2",id: 2});
	var pank = new StudentModel({name: "Lionel3",id: 3});
	var classones = new StudientCollection([jony, vicky]);
	classones.add(pank);
	displayCollectionContents("Three element:", classones);
});
function displayCollectionContents(string, collection) {
	console.log(string + " " + JSON.stringify(collection.toJSON()));
}
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS2Gku4q73NLpWw_-bW%2F-MS2H6eipUcsxS5WJCGv%2FScreenshot_6.jpg?alt=media\&token=c449c6ce-32f4-4ad3-b110-79cffedc0995)

C:\Users\Administrator\Desktop\gulp\app.js

```
StudentModel = Backbone.Model.extend({
	defaults: {
		name: "unknown"
	}
});
StudientCollection = Backbone.Collection.extend({
	model: StudentModel
});
jQuery(document).ready(function($) {
	var jony = new StudentModel({name: "Lionel1",id: 1});
	var vicky = new StudentModel({name: "Lionel2",id: 2});
	var pank = new StudentModel({name: "Lionel3",id: 3});
	var classones = new StudientCollection([jony, vicky]);
	classones.add(pank);
	classones.remove(jony);
	displayCollectionContents("Two element:", classones);
});
function displayCollectionContents(string, collection) {
	console.log(string + " " + JSON.stringify(collection.toJSON()));
}
```