Backbone.js remove View

Last Updated : 03 Aug, 2022

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

HTML

<!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>