Reorder HTML elements after deleting an element

For my school project, I am developing a website similar to Google Keep that allows users to create and share notes. I have utilized Bootstrap's container, row, and cards to display the existing notes. Everything seemed to be working fine until I encountered an issue when deleting elements, which resulted in gaps where the deleted element used to be. Can anyone provide guidance on how to remove these gaps and make the remaining elements move to fill the space?

The elements in question are:

<div class="col-sm-4">
</div>

Thank you in advance, Nikita

htmlcssbootstrap-4

Answer №1

One easy solution could be to refrain from enclosing every n notes in a .row element. By doing this, the cards will reflow automatically.

However, it's challenging to provide a precise answer without an MCVE for reference.

// Here is a sample code snippet showcasing card removal functionality.
$( function () {
  
  $( '.notes' ).on( 'click', '.card', function ( e ) {
    $( this ).parent().remove();
  } );
  
} );
.card {
  margin-bottom: 1rem;
  padding: 2rem 4rem;
  text-align: center;
  cursor: pointer;
}

.card:hover {
  background-color: #eaeaea;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">

<div class="container notes">
  <div class="row">
    <div class="col col-sm-4">
      <div class="card">1</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">2</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">3</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">4</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">5</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">6</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">7</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">8</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">9</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">10</div>
    </div>
  </div>  
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for an onclick attribute to assign a function to document.getElementById without overwriting the existing value?

I want to create a numeric keypad in HTML with numbers 1-9, and I'm unsure if JavaScript can handle an onclick function for each key to show the number in the display div. What would be the most effective way to achieve this? <div id="display"> ...

javascripthtml

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

Hey there, I'm currently working on my angular application. When it comes to inserting the first 100 characters of content into the "description" meta tag for Facebook sharing, I've run into an issue. The description ends up including the HTML el ...

javascripthtmlangularjsdommeta-tags

Adjusting Image Size with HTML and CSS

UPDATE* I am having an issue with the resizing of images on my website. The problem specifically pertains to the music tab where the image is not fitting within the div size properly. I have provided a screenshot for reference https://i.sstatic.net/Zbwag ...

htmlcssimage

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

javascripthtmlcss

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

jqueryhtmlcss

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

csshtml

How to make a drop-down select list remain open even after selecting an option

In my current project, I have a dropdown box that holds a list of files which can be deleted. The user needs to select the file they want to delete from the dropdown each time and then the process repeats for every file. I would like to implement a feature ...

jqueryhtml

Expand the div to fit the rest of the screen following the fixed-size navigation bar

I am looking to create a webpage layout that includes a header, mid section, and footer. In the mid section, I want to have a fixed width navigation bar of 250px, with another div holding the content that stretches to fill the remaining space in the browse ...

htmlcsslayoutcss-positionstretch

Transitioning side-by-side images into stacked vertical images for mobile devices

I am struggling to stack 4 side by side images on top of each other along with text over the images when viewing on mobile, instead of shrinking them. Despite my attempts at adjusting the styles, I have not been successful in achieving this desired layout. ...

javascripthtmlcssimageresponsive-design

Unexpected behavior when using padding on the left side of a vertical position

I can't seem to figure out a strange issue. I have a div containing multiple paragraphs, but when I adjust the padding left within the div to align all paragraphs to the left, they not only shift to the left but also move up as if I'm positioning ...

javascripthtmlcss

Navigate through the parent elements and show the text if the child element is not present

I'm currently exploring how to iterate through all parent classes (.grid) and if there is no child div with the class (.image-container), then to display the (.content-container) within the same (.grid) section. HTML: <style> .grid .content-co ...

jqueryhtmlcss

The appearance of asp.net datagrid borders differs noticeably (negatively) in various browsers

Hey there! I've noticed that my webpage looks different in various browsers - it's awesome in Chrome, okay in Mozilla, but pretty bad in IE 7. Unfortunately, most of my page visitors use IE. The issue lies with the borders. I have a reddish bor ...

asp.netcssinternet-explorergridviewgoogle-chrome

The camera continues to move smoothly after the static-body effect has been activated

I recently implemented A-Frame physics using this library, and encountered an issue where applying static-body to the a-mixin voxel in the Minecraft demo still allowed my character to move through the box. My camera is configured with universal-controls f ...

htmlaframe

In order to work with the optionSelectionChanges property of the MdSelect directive in Angular Material2, it

Within my application, there is a Material2 select dropdown widget containing several options. app.component.html <md-select placeholder="Choose an option" [(ngModel)]="myOption" (optionSelectionChanges)="setOptionValue(myOption)"> &l ...

htmlangulardrop-down-menuangular-material2

Is it possible to combine ::first-line and ::selection in CSS?

Is it possible to apply selection colors only to the first line of text in my course homework using CSS3? I recently started learning CSS3 and I am curious to know if this is achievable. While searching on Google, I came across information suggesting tha ...

htmlcss

Finding a particular sequence of characters and extracting information that comes after it

A while back, I created a website and now I'm looking to transfer the data into a database without manually copying and pasting the 400+ pages it has accumulated. This way, I can transform the site into a database-driven platform. Each page on my sit ...

phphtmlparsing

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...

javascripthtmlcss

Text with Icon Fonts Does Not Align Vertically

I'm using icon fonts in a nav list and I want to place text between two of the icons. However, there's an issue with alignment - the icons are positioned higher than the text, causing them to not match up well. Is there a solution to this problem ...

htmlcssicon-fonts

Is there a way to include an optional backslash in URLs using the .htaccess file without leading browsers to believe I am navigating to a subfolder?

As I update my php pages with the .htaccess file, I am facing an issue where the pages do not load properly when an optional backslash ("/") is included in the URLs. One possible solution is to use absolute URLs instead of relative ones so that CSS and J ...

phphtmlapache.htaccessmod-rewrite

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

javascriptjqueryhtmlcssdojo