Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space.

<div class="post-content">
     <div class="slider-1-smart">
     --- slider contents ---
     </div>

     <div></div>
     <div>   </div>

     <ul>
         <li>Text 1</li>
         <li>Text 2</li>
         <li>Text 3</li>
     </ul>  
</div>

I've attempted the following code:

$(function() {
    $('.post-content > div:empty').each(function() {

        j(this).remove();

    });
});

However, this code removes not only the empty elements but also the slider container. How can I specifically target and remove elements after the class "slider-1-smart"?

Any insights would be greatly appreciated. Thank you!

Answer №1

If you want to target elements that are truly empty, you can use the :empty pseudo-class. This selector only picks elements that have no content inside them, disregarding any whitespace.

To filter out and remove sibling div elements that are empty, you can use a combination of .nextAll() and $.trim() to check if the HTML content is empty:

See an example in action here

$('.post-content > .slider-1-smart').nextAll('div').filter(function() {
  return $.trim($(this).html()) === '';
}).remove();

Answer №2

To avoid checking the slider element contents, simply include one small tweak in your code. Just append .not("slider-1-smart") to the selector chain.

$(function() {
    $('.post-content > div:empty').not(".slider-1-smart").each(function() {

        $(this).remove();

    });
});

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

Troubleshooting Vercel and Express DELETE request cross-origin resource sharing problem

Currently, I am in the process of developing an API using Vercel and ExpressJS. The GET and POST endpoints are functioning properly, however, I encountered an issue with the DELETE endpoint. When attempting to access the endpoint from my client-side JavaSc ...

List of Nodes with five links

I'm encountering an issue when trying to reference the final node. The expected output is: Linked List with 5 nodes Node Value: Head Node / Next Node Value: Second Node / Last Node Value: null Node Value: Second Node / Next Node Value: Third N ...

When processing a response from the backend (using express js), cookies are not being received in the browser while on localhost

I'm currently facing some difficulties with implementing authorization cookies within my application. Whenever I attempt to send a GET request to my API (which is hosted on port 8080) from my React frontend (running on port 3000), the cookies that I ...

Specify padding or margin for all sides in a single line of XML code

Is there a way to set the padding or margin for all four sides in xml with just one line, similar to how we can do it in css? For instance, in css: padding: 1px 2px 3px 4px; Is there an equivalent method in xml for accomplishing this? ...

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

Utilizing Vue3 and naive ui for front-end development has been a challenge for me as I primarily focus on back-end development and lack expertise in front-end technologies. To enhance user interaction, I incorporated naive ui’s BasicTable along with an ...

Facing difficulties in Angular 8 while trying to import firestore and firebase for an authentication system

While attempting to implement Firestore/Firebase functionalities for Google OAuth signin, I encountered an error indicating that Firebase is not imported: https://i.sstatic.net/oL4rY.png CODE: ERROR in node_modules/@angular/fire/auth/auth.d.ts:4:28 - er ...

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

"Error: The req.body object in Express.js is not defined

edit:hey everyone, I'm completely new to this. Here's the html form that I used. Should I add anything else to this question? <form action="/pesquisar" method="post"> <input type="text" id="cO" ...

I'm encountering some strange blank white space when I view my webpage on a phone or Safari. It seems to be affecting the CSS grid and flexbox of images

Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displayin ...

How can I use CSS to customize the appearance of the elements within an iframe?

<iframe src="#link"> #document <!doctype html> <html> ... </html> </iframe> Is there a way to customize the styling of elements within the #document using CSS only, without needing to use Jquery? ...

Methods for animating .jpg images using CSS

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

Utilizing Facebook's JavaScript SDK to transmit variables to PHP using ajax

Thank you in advance for your attention. I am trying to utilize the Facebook js SDK to retrieve the user's name and id, and then send them to PHP on the same page (index.php). After successfully obtaining the username and id and storing them in two Ja ...

Hover over to disable inline styling and restore default appearance

There are some unique elements (.worker) with inline styles that are dynamically generated through Perl. I want to change the background when hovering over them and then revert back to the original Perl-generated style. The only way to override the inline ...

Rails does not transfer data-attributes in HTML5

I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...

Angular unable to send object to HTML page

Struggling with learning angular, encountering new challenges when working with objects in different components. In two separate instances, try to implement two different mechanisms (microservice or service component serving an object directly). This speci ...

The fixed navigation bar is obscured by the address bar in Chrome mobile

After starting a new project, I encountered an issue with my fixed navbar while testing it on Chrome on mobile iOS. Initially, I believed it to be a browser bug, but after reviewing previous projects, I realized that they functioned properly with the fixed ...

What may be causing this Brython page with stubs to generate cascading errors?

I'm working on a simple webpage that combines jQuery UI and Brython with Python's standard library: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Game</title> ...

Launching an image link within the same location on the subsequent page to which it is directed

I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm lookin ...

Guide on how to activate a hyperlink with a specified target using JavaScript

I have a URL structured like this: <a id="preview" ng-href="/preview/{{accountId}}/app/{{app.id}}" target="preview" class="btn btn-default" style="margin-left: 20px;" ng-hide="isJobMode">Preview</a> This is part of an Angular app, and I am tr ...

Trouble with jQuery script causing initial word count issue in textarea upon page load

I have implemented a word count textarea jQuery script and I am trying to figure out how to update the word count onload to 2 when the text area initially displays "this example". Currently, it shows 0 words. Although I can set focus on it and move the c ...