Get rid of the border when the display property is changed to none

I am facing a challenge with removing a border when the display property is set to none, despite it being a seemingly simple task.

My understanding has always been that setting the display property to none removes an element from the HTML flow. However, in the example I have provided, there is still a border showing on the last element.

<div class="outer">
  <div class="inner">
    <div class="control">Foo</div>
    <div class="control d-none">Bar</div>
  </div>
</div>

https://jsfiddle.net/6hfzpcoL/

Answer №1

Even though the 'd-none' element is hidden from view, it still exists in the container. Because of this, Foo cannot be considered a last child and the border will still be applied.

To accomplish what you are attempting to do, CSS alone is not sufficient. You would need to incorporate Javascript or JQuery.

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

Tips for creating a responsive React Monaco Editor:

I'm currently working with react-monaco-editor and having trouble making it responsive. The component has a fixed height and width, so when I resize the screen, the width stays the same. <MonacoEditor width="1200" height=& ...

Expanding the header in Ionic 3 with a simple click event

I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF: However, I am facing an issue where I want to expand the header on click instead of o ...

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

Difficulty arises when attempting to pass a PHP variable as an argument within a MySQL query

My current task involves using a PHP variable as a search term in querying a MySQL database. First, I retrieve the variables from an HTML form: <?php //Set up variables $vals = array($_POST["id_number"], $_POST["id_name"], $_POST["id_submitname"]); $ke ...

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

Using JQuery to call a PHP file and verify a unique identifier

I've been attempting to use this tutorial to check the availability of certain IDs while a user fills out forms. However, I'm working with PostgreSQL instead of MySQL and seem to be encountering issues with my PHP file. There seems to be a small ...

Having difficulty configuring Compass in WebStorm

Trying to integrate Compass into an existing WebStorm project has been challenging for me as the CSS files are not linking properly. Despite my efforts to modify the relative links, I have not yet managed to resolve the issue. The folders and config.rb we ...

I am experimenting with showcasing a series of Bootstrap div elements, each containing a dynamic carousel of images sourced from a database along with additional information

My image display is working fine, but the other divs are appearing within the first div and the additional information like title and description are not showing. I'm aiming to have six rows, each with two columns, displaying a carousel of images and ...

Is there a way to resolve issues with window.open() on Heroku platform?

I've been working on hosting a webpage on Heroku using Node.js. Instead of using the php method, I opted to go with Node and it's been going smoothly so far. However, I've run into a small issue. Here's what my Procfile looks like: web ...

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing: At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenu ...

Waypoint function malfunctioning when overflow:hidden is applied

CodePen If you exclude the overflow property from the CSS selector .wrapper in the CodePen example, the waypoints functionality will work properly. However, it does not function correctly when using the overflow set to hidden either horizontally (x) or ...

What could be preventing my bootstrap class from being applied as expected?

As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with: <button class="btn btn-primary btn-xl">Find out More</button> However, when ...

Displaying a banner at the bottom of a React page

I need to display a banner with the text "All items..." on every page. Currently, I have set the position attribute to fixed, but the banner is aligned to the left and I want it to be centered horizontally instead. Below is my code snippet: export const Ba ...

Python selenium issue: Element not found in the document using locator (//input[@type='file']')

I'm attempting to automate the process of uploading a file using python. However, when I run the code below with python selenium, an error is thrown. I even added a 10-second wait to prevent synchronization issues. driver.execute_script('window ...

Creating an anonymous component in Vue.js involves enclosing the received slots (vnodes) within a wrapper component

Is there a way to wrap two specified named slots, slotOne and slotTwo, which are located in the child component at this.$scopedSlots.slotOne and this.$scopedSlots.slotTwo respectively? I would like to then conditionally render these slots (vnodes) as shown ...

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

What is the best way to include an active item within an li tag inside a div container?

Here is the structure for a widget that I have, and I want to add the active class to the li. I've tried doing this but it's not working and I'm unsure where the issue lies. var selector = '#recent-posts-5'; var url = window. ...

The CSS table-cell element causes adjacent table-cell content to reposition

The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...