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=
"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>
</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=
"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>
</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>
