Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it simply refers to a technique for designing user interfaces. The creation of a program’s user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.
View’s Remove method is mainly used to delete a view from the DOM. When this function is triggered it in return triggers the stopListening function which stops the view to call the events which the view earlier listenTo’d.
Syntax:
view.remove()
Example 1: The code below demonstrates how to Remove a view by clicking on a button and triggering the remove method.
<!DOCTYPE html> < html >
< head >
< title >Backbone.js remove View</ title >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >Backbone.js remove View</ h3 >
< div id = "mydiv" ></ div >
< script type = "text/javascript" >
var ViewDemo = Backbone.View.extend({
events: {
'click input': 'removeFunc'
},
removeFunc: function () {
myView.remove();
document.write("The View has been removed.")
},
render: function () {
this.$el.html(
'< input type = "button" value = "Click to remove this view" ></ input >');
},
initialize: function () { this.render(); }
});
var myView = new ViewDemo({ el: '#mydiv' });
</ script >
</ body >
</ html >
|
Output:
Example 2: The code below demonstrates how you can trigger the remove method of a View from another view.
<!DOCTYPE html> < html >
< head >
< title >Backbone.js remove View</ title >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >Backbone.js remove View</ h3 >
< div id = "mydiv_1" ></ div >
< div id = "mydiv_2" >
</ div >
< script type = "text/javascript" >
var ViewDemo = Backbone.View.extend({
events: {
'click button': 'removeFunc'
},
removeFunc: function () {
myview_1.remove();
},
render: function () {
this.$el.html(
'< button >Click to remove the view below</ button >');
},
initialize: function () { this.render(); }
});
var ViewDemo_1 = Backbone.View.extend({
events: {
'change input': 'removeFunc'
},
removeFunc: function () {
myview.remove();
},
render: function () {
this.$el.html(
'Enter Some Text to remove the delete the above view < input type = "text" ></ input >');
},
initialize: function () { this.render(); }
});
var myview = new ViewDemo({ el: '#mydiv_1' });
var myview_1 = new ViewDemo_1({ el: '#mydiv_2' });
</ script >
</ body >
</ html >
|
Output:
Reference: https://backbonejs.org/#View-remove