Delete the content within the span tag

Is there a way to remove the time + icon displayed on my blog page?

<span><i class="fa fa-newspaper-o"></i>47 sec read</span>

I attempted to use

.fa-newspaper-o{display:hidden}

however, this only hides the icon before "47 sec" but leaves the text visible

Here is the complete code snippet:

<ul class="list-inline">
  <li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&amp;customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
      <a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&amp;customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
    </span></li>
  <li>
    <span class="right"><a href="#" class="zilla-likes" id="zilla-likes-2010" title="Like this"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></a></span>
  </li>
  <li>
    <span class="post-comments-number">
      <i class="fa fa-comment-o"></i><a href="http://www.fact-file.com/2020/03/22/sindh-govt-decides-to-impose-lockdown-across-the-province/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&amp;customize_messenger_channel=preview-0#respond">0</a> </span>
  </li>
  <li><span><i class="fa fa-newspaper-o"></i>47 sec read</span></li>
</ul>
htmlcss

Answer №1

One way to hide a specific list item within a .list-inline class is by using either the CSS selector .list-inline li:nth-child(4) { display: none;}
or 
.list-inline li:last-child { display: none;}
.

Answer №2

In addition, there is an option to maintain the space of the removed element by using visibility: hidden instead. This way, the element will still leave a mark (occupy space).

Answer №3

var li=document.getElementsByTagName('li');
li[li.length-1].style.visibility='hidden';
<ul class="list-inline">
  <li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&amp;customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
      <a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&amp;customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
    </span></li>
  <li>
    <span class="right"><a href="#" class="zilla-likes" id="zilla-likes-2010" title="Like this"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></a></span>
  </li>
  <li>
    <span class="post-comments-number">
      <i class="fa fa-comment-o"></i><a href="http://www.fact-file.com/2020/03/22/sindh-govt-decides-to-impose-lockdown-across-the-province/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&amp;customize_messenger_channel=preview-0#respond">0</a> </span>
  </li>
  <li><span><i class="fa fa-newspaper-o">47 sec read</i></span></li>
</ul>

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

The function .val() is not a recognized method

hello everyone here is the section of my HTML code: <div class="radio"> <input type="radio" name="certain" id="oui" value="oui"/> <label for="oui"> oui </label> <br /> <input type="radio" name="certain" id=" ...

javascriptjqueryhtml

Exploring methods to modify the style attribute of a div tag in .NET

Using .NET, we need to access the CSS style of a div and input certain values in the code behind on page load. Since the div is located on the master page and this is another separate page, we are unable to add RUNAT="SERVER" to the div. ...

c#css.net

"Selecting elements with CSS using the 'element'

While exploring some websites for studying purposes, I came across this code snippet. .site-header .widget-area span.but As a beginner in CSS, I'm curious to know more about the span.but part. Is it similar to the :not pseudo selector? ...

csscss-selectors

Integration of a QR code scanner on a WordPress website page

I'm in the process of setting up a QR code scanner on my Wordpress site or within a popup. The goal is for users to be able to scan a QR code when they visit the page/popup link. Specifically, the QR code will represent a WooCommerce product URL, and ...

javascriptphphtmlhtml5-canvas

External CSS file for Demandware platform

My boss was supposed to train me this year on demandaware knowledge, but ended up quitting, leaving me in the dark. I am scheduled to attend workshops later this year, but for now I am relying on Google and stackoverflow for guidance. Currently, I am wor ...

cssstylesdemandware

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

javascriptcsstypescriptmaterial-uiemotion

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...

cssasp.netasp.net-mvcstylesheet

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...

htmlcssbootstrap-4

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Is there a way to make the hover state in navigation items persist when the mouse hovers over a sub-menu? Currently, when hovering over a top-level nav item, the link color changes to white and background turns black, but this reverts back once the mouse m ...

csshover

How to Maintain SASS Code Efficiency with Media Queries

How can I avoid repeating myself in my CSS code when using two different media queries for phones and tablets that require the same exact styling? $mobile-portrait: "only screen and (max-width: 680px)"; $tablet-portrait: "only screen and (min-device-wid ...

htmlcsssassmedia-queries

Is there a way to condense my child table directly below its parent column?

When attempting to collapse the "child tr" within the "tr" in my code, the collapse is not positioning correctly underneath its parent tr. While it works fine in a JSFiddle, the issue arises when using my editor and live preview. In this scenario, both "ch ...

javascriptjqueryhtmlbootstrap-4bootstrap-table

Unique background image is assigned to each div sharing the same class

Seeking a way to assign unique random backgrounds to each div with the .item class. Initially attempted using PHP and CSS, for example: <?php $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg ...

javascriptphpjquerycssrandom

Create a sleek and uniform design with Bootstrap by setting up three columns that maintain the same height

I am attempting to design a 3 column div that maintains equal height for all responsive rows, each containing an ICON and information. <div class="container"> <div class="row row-eq-height"> <div class="col c ...

htmlcssbootstrap-4

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

javascriptjqueryhtmlcss

What is the best way to retrieve the file and directory tree structure from git using php?

I am looking to streamline the process of downloading zip files from my public git repository on Bitbucket. Rather than manually creating a download button for each zip file, I want to dynamically generate a PHP page that displays all available zip files a ...

phphtmlgit

Enhancing collapsible list headers in jquery mobile with checkboxes

Having trouble with a jQuery Mobile website issue. Currently working on a jQuery mobile site that includes a collapsible list (). The client request is to have a checkbox inside the header, allowing users to check items off without needing to open them. T ...

javascriptjquerycssjquery-mobilemobile

Arrange three images both vertically and horizontally at the center of the page

I am facing an issue with aligning a button and 2 images in a row on my website. Currently, this is how it looks: https://i.stack.imgur.com/yrQB6.png Here is the HTML code I am using: <div class="row text-center"> <div class="col-md-12"> ...

htmlcssimagetwitter-bootstrapalignment

The row and col classes will only expand to the full width if they are used within form or p elements

I am facing some unusual behaviors while using Bootstrap in my current project. It seems to be the first time I have encountered such issues. Below is the HTML code snippet: <div class="row" style="background-color: blue; padding: 2rem; ...

htmlcssbootstrap-5angular-bootstrap

Scrolling Horizontally with Bootstrap Cards

I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this: <div class="container-fluid py-2"> <div class="d-flex flex-row flex-nowrap" style="overflow: auto;"> <div cl ...

htmlcssbootstrap-5

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml