Search⌘ K
AI Features
Home
Courses
Introduction to Marionette.js – The Backbone Framework

Deleting a Contact

Explore how to implement contact deletion in Marionette.js by adding a delete button with event handling. Learn to manage event bubbling, use specific CSS selectors for event listeners, and delegate data modification tasks properly to maintain clean application architecture.

We'll cover the following...

Our goal is to enable the functionality of deleting a contact in our application. For that, we need to follow the steps provided in the figure below:

Steps to follow to create the delete functionality for our application
Steps to follow to create the delete functionality for our application

Add the “Delete” button

Now that we’ve got our contacts listed as we want them, let’s add a button to delete a contact:

PHP
<script type="text/template" id="contact-list-item"> 
    <td><%- firstName %></td>
    <td><%- lastName %></td>
    <td>
        <button class="btn btn-small"> 
            <i class="icon-remove"></i> 
            Delete
        </button>
    </td>
</script>

  • Lines 5–8: Generate a “Delete” button styled with Bootstrap.

  • Line 6: Add an icon to the button.

Add a column to the template

Since we’ve added a column to our child view, let’s keep things in sync by adding a column to the table template in line 6:

PHP
<script type="text/template" id="contact-list"> 
  <thead>
    <tr>
      <th>First Name</th> 
      <th>Last Name</th> 
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</script>

If we look at our page, we’ll see our “Delete” ...