CODEWITHSUNDEEP
htmlcss
Xaini Ali
Xaini Ali

Reputation: 31

Remove text inside span

I want to remove time + icon shown in my blog page

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

I have tried using

.fa-newspaper-o{display:hidden}

but it only hides the icon before "47 sec" leaves the text displayed

Whole code

<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>

Upvotes: 0

Views: 461

Answers (3)

DCR
DCR

Reputation: 15665

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>

Upvotes: 0

candicecodes
candicecodes

Reputation: 46

To add to the above, you can use visibility: hidden if you want the removed element to still leave a footprint (take up space).

Upvotes: 0

beltouche
beltouche

Reputation: 761

.list-inline li:nth-child(4) { display: none;} or .list-inline li:last-child { display: none;} will hide the list item in question.

Upvotes: 2

Related Questions