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.
HTML
<!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;">         neveropen     </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.
HTML
<!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;">         neveropen     </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Â
