I am dealing with tables nested inside divs, and some of them are either empty, contain a single space, or have a single character like "-", which I refer to as EMPTY DIVs. What is the best way to use JavaScript to remove these EMPTY DIVs upon loading the document?
An example of my EMPTY DIVs looks like this:
<div class="extra">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
or
<div class="extra">
<table>
<tr>
<td>-</td>
</tr>
</table>
</div>
give this a shot
var $emptyDivs = $();
$('div table').each( function(){
// extract text from table and replace with space
var c = $(this).text().replace(/\s/g,'');
// check if table is empty or contains '-'
if ( c =='' || c == '-'){
// add parent div to collection
$emptyDivs.push( $(this).closest('div')[0] );
}
});
// remove the empty div elements
$emptyDivs.remove();
I hope this solution proves useful!
Give it a shot
$('.additional').filter(function(){
var content = $.trim($(this).find('table').text());
return content == '' || content == '-';
}).remove()
Example: Interactive Demo
Here's a suggestion:
If you are looking to retrieve the values of a specific div, you can utilize $('#yourdivid').text() for comparison purposes. Once you have identified the divs you want to remove, you can use the following method:
var targetDiv = document.getElementById('yourdivid');
targetDiv.parentNode.removeChild( targetDiv );
Give this a shot:
$(".additional").find("table").each(function(){
if( $.trim($(this).find("tr td").text()) == "" || $.trim($(this).find("tr td").text()) == "-" )
{
$(this).parents(".additional:first").remove();
}
});
I have been experimenting with a fantastic Expand/Collapse JavaScript function that I came across on JS Fiddle, but unfortunately, it's not working as expected when testing it in a browser. Can anyone provide some guidance on what might be causing the ...
Ensure that an input text box can only contain a maximum of 13 numbers, but if the user enters a 14th number as a decimal point, then allow up to 16 numbers. HTML: <input type="text" maxlength="15" onkeyup="checkCurrency(this)"/> Script: func ...
I am struggling with passing variable data from the main file to functions in my Node.js module. Currently, I have defined the variables like this: var region; var api_key; exports.region = region; exports.api_key = api_key; module.exports = { getSum ...
I have a scenario where I am working with a table that displays two buttons, one for deleting and the other for editing a row. For both of these buttons, I need to access the specific row Id. I attempted to utilize customBodyRender but ran into an issue ...
My current struggle involves meeting the requirements of my customers. I have a small box (230px x 200px) with an image that will display a list on hover. However, the customer now wants more items in the list than can fit in the box. Scrolling within the ...
Is there a way to add margin to the "col" element with the class "mr-md-3" without causing any layout breaks within the containing div? .content { height: 200px; border: 1px solid black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery ...
I am dealing with an Array<object> containing n objects of a specific type. { name: 'random', startDate: '2017-11-10 09:00', endDate: '2017-11-23 11:00' } My goal is to filter this array before rendering the resu ...
I need help with a design challenge I am facing. I am trying to add a simple 40px height vertical border at the bottom of a Bootstrap 5 navbar, transitioning from color #e5e5e5 to color #fefefe. I have included a sample image for reference: https://i.ssta ...
I have recently set up a Next.js site utilizing the @svgr/webpack library. In order to start using an SVG image with the new next/image component, I configured my next.config.js file accordingly. My next.config.js setup looks like this: module.exports = { ...
I am currently working on an application using React.JS Before adding data, I want to implement a condition check. This is the code snippet: const App = () => { const [item, setItem] = useState([]) const [category, setCategory] = useState([]) ...
As I design a website that has a fixed width and zooms out on mobile browsers, I've opted to adjust the zoom using CSS rather than viewport meta tags: html, body { zoom: 0.8; } It's been effective so far, but now I'm facing an issue wi ...
Is there a way to decrease the width of a specific page on my website without modifying the current theme that I am using (zerif-lite)? I want to accomplish this task by adding custom CSS to styles.css. However, I am facing difficulties as I only want to a ...
Hey everyone, I'm struggling with my code and could really use some help. I'm new to knockout and encountering an issue. Initially, I receive JSON data from the database and it works fine. However, when I click 'Add some', I'm tryi ...
Need some advice on changing the background color of Material UI's Drawer. I've attempted the following approach, but it's not producing the desired result. <Drawer style={customStyle} open={this.state.menuOpened} docked={false} ...
I designed a navigation bar and now I'm looking to customize the CSS for it in WordPress. Specifically, I want to be able to reference the nav bars by name from PHP to CSS. It seems like there are just two dots representing variables. Here is the co ...
Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...
Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...
I am struggling to create a state provider that can handle multiple parameters. Is it possible to capture them as an object or array, or do I have to capture them as a string and then separate them? For example, this is my current provider: .state(' ...
I'm currently working on a project using Vue, and I'm fetching an image through a Django REST API. The code in table.vue file: <tbody> <tr v-for= "user in users" :key="user.id_users"> <th>{{user.id_use ...
I have been searching for solutions here but haven't had any luck so far. I am currently learning HTML and while working on a simple login feature, I have run into some issues. I am using XML as a makeshift "database" and PHP to retrieve the informati ...