Remove the container once all of its children have been dismissed

Question

Remove the container once all of its children have been dismissed

Is it possible to automatically remove the parent container when all of its children elements have been removed? Each child element has a dismissal option that, when clicked, removes the element.

I am using backbone.js for this project and would like a solution where removing all children would also trigger the removal of the parent container.

<div class="container>
  <ul>
    <li><a class="dismiss"></a></li>
    <li><a class="dismiss"></a></li>
    <li><a class="dismiss"></a></li>
  </ul>
</div>

Your input is greatly appreciated!

javascript jquery html css backbone.js

Answer 1

Answer №1

$(document).on("click",".dismiss",function(e){
   e.preventDefault();
   $(this).parent("li").remove();

   if($(".container ul li").length == 0){ 
      $(".container").remove();
   }
});

Check out the demo

Answer 2

$(document).on("click",".dismiss",function(e){
   e.preventDefault();
   $(this).parent("li").remove();

   if($(".container ul li").length == 0){ 
      $(".container").remove();
   }
});

Check out the demo

Remove the container once all of its children have been dismissed

Answer №1

Similar questions

Navigating between Vue Router pages triggers multiple events within the mounted() lifecycle of VueJS

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

Controller Function Utilizing Private Variable in AngularJS

The download attribute is not functioning properly on both Chrome and Edge browsers

Ways to create two separate references pointing to a single object

Puppeteer throwing an error when querying selectors cannot be done (TypeError: selector.startsWith is not a supported function)

When hovering over an image, CSS text will be displayed

Encountering a 403 Forbidden error while attempting to make an Ajax post request within the Django

Getting the value from a .sh (Shell Script) file in React: How to do it?

Steps for creating a one-sided container in CSS

Populating table with information stored locally

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

Exploring the Process of Iterating Through a JSON Array in Angular

Tips for showcasing the elements depending on the chosen category

Is there a way to refresh the list automatically after deleting an item using Firebase?

Extract URL fragment using JavaScript

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

Converting Coordinates from a Z-Axis Up System to a Y-Axis Up System in THREEJS

The CSS property 'clear:both;' is not functioning properly on IE7 browsers whereas works fine on IE8/IE9, Firefox, Chrome, and other browsers

Experiencing difficulties with mocha and expect while using Node.js for error handling