What is the best method to exclude the <a> tag when displaying content in HTML?

Is there a way to hide the link within an a tag when printing?

.p {
  display: none;
}

@media print {
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-large btn-success np" onClick="window.print()">Print</button>
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Sr.</th>
      <th>Student</th>
      <th>Marks</th>


    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="http://jainvidhya.co.in/result.php?arn=CB2017AS11Z89010" target="_blank" class="np">Anu Bohra</a> <span class="p">Hi</span></td>
      <td>30</td>
    </tr>
  </tbody>
</table>

I attempted to use the class (np) on the a tag, but it only displayed "Hi" in the second column.

What I want is to show both the content between the opening and closing a tags as well as "Hi".

Instead of displaying content + link + Hi, my code currently shows just content + Hi.

htmlcss

Answer №1

To prevent the link from displaying on print, you can use the following CSS code snippet:

.p {
  display: none;
}

@media print {
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
  a[href]:after {
    display: none;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-large btn-success np" onClick="window.print()">Print</button>
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Sr.</th>
      <th>Student</th>
      <th>Marks</th>


    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="http://jainvidhya.co.in/result.php?arn=CB2017AS11Z89010" target="_blank">Anu Bohra</a> <span class="p">Hi</span></td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Answer №2

You have the option to include an additional element after the anchor tag that contains identical content. By assigning the class p to it, you can selectively display this content when printing:

<span class="p">Anu Bohra</span>


.p {
  display: none;
}

@media print {
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-large btn-success np" onClick="window.print()">Print</button>
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Sr.</th>
      <th>Student</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <a href="http://jainvidhya.co.in/result.php?arn=CB2017AS11Z89010" target="_blank" class="np">Anu Bohra</a>
        <span class="p">Anu Bohra</span>
        <span class="p">Hi</span>
      </td>
      <td>30</td>
    </tr>
  </tbody>
</table>

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

How to Use Jquery to Delete a Specific String

I've been attempting to remove certain strings from a string using Jquery, however it seems like the code isn't working and my variable remains unchanged. var classes = $("body").attr('class'); alert('.side-nav' + classes); c ...

javascriptjqueryhtmlcss

My React component seems to be unable to locate and process my CSS file

I am encountering an issue where my React Component is not recognizing my CSS file. Here is the code snippet from my React component: import React, { Component } from 'react'; import './Jumbotron.css'; class Jumbotron extends Compone ...

cssreactjs

What is the reason behind every element in bootstrap being enclosed within an anchor tag?

I am currently delving into the world of bootstrap for the first time and encountering an issue with the grid system. Somehow, whenever I try to incorporate an - a href="#" - tag within the grid, it distorts the layout inexplicably. I have been struggling ...

phphtmlbootstrap-grid

Conceal a specific class from being seen by another class of the same name upon clicking

I have a webpage with multiple images all sharing the same class name. When I try to hide a specific image by clicking on it, all images with that class are affected. Even though I used PHP to display the images on the webpage, I haven't been able to ...

javascriptphpjqueryhtmlcss

Issue with Collapse Feature on Bootstrap 3.x Navbar

The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is preventing the input box from shrinking further?

I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to. Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how ...

javascriptcssreactjscss-grid

An effective approach to positioning HTML elements at specific X and Y coordinates

I have an innovative project idea! The concept is to enable users to create points by clicking on the display. They can then connect these points by clicking again. However, I am facing a challenge when it comes to creating HTML elements at the exact loc ...

javascripthtmltypescriptmouseevent

Retrieve the content of the second <li> element using jQuery

Seeking assistance with replacing the separator symbol in a given structure. In order to proceed, I first need to identify its position. Can anyone offer guidance on how to do this? Below is the structure in question: <div> <ul> ...

jquerycsshtml-lists

Creating a Stylish Web Design with Bootstrap HTML - Tips for Perfecting Your Output

My code is producing the following output: https://i.sstatic.net/LVda1.png But I want to achieve this instead: https://i.sstatic.net/OUlOP.png How can I modify my code to get the desired layout? <link rel="stylesheet" href="https://cdn.jsdelivr.n ...

htmltwitter-bootstrap

What is the best way to incorporate a progress bar animation into my notification?

Seeking assistance to implement an animated progress bar that changes colors gradually over time based on a variable [timer]. Can anyone lend a hand with this? Thank you! https://i.sstatic.net/lhgeF.png $(document).ready(function(){ window.addEvent ...

javascripthtmlcssluafivem

Showing a hidden div after an unsuccessful AJAX call

Encountering an issue with displaying a div notification using the code snippet below: $.ajax({ url: url, cache: false, async: false, success: function (data) { response = jQuery.parseJSON(data); }, error: functi ...

jqueryhtmlcssajax

Changing the color of an SVG as I scroll to the bottom of the page

On my React page, I am looking to change the color of an SVG element from black to white at the bottom of the page. Is there a React-specific method for accomplishing this task? The div container located at the bottom of the page is not the parent div fo ...

cssreactjssvg

Are you looking to add some flair to your Flexbox layout using Media

I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...

htmlcsswebkitflexbox

Changing the order of rows and columns with CSS3 and DOM manipulation

I have implemented the following CSS code to alternate the background color of li elements. However, I am facing an issue where I need the CSS styling to remain consistent even if the rows have the .hidden class applied to them (with .hidden class having d ...

csscss-selectors

Integrating individual script into HTML

Imagine you have a file named public/index.html. Additionally, there is another html file called otherScript, which contains only <script> tags with a script inside. How can you include these scripts into your public/index.html file? You intend to ...

javascripthtmlwebpack

What could be causing the blurriness in the image?

I'm having trouble displaying an image below my navigation bar. The image I'm trying to display is located at https://i.sstatic.net/8PUa3.png and has dimensions of 234 x 156 px. However, the image appears blurry and only a portion of it can be s ...

htmlcssvue.js

Experimenting with Jquery hyperlinks beyond the realm of Google Chrome

Is there a way to verify a jQuery link without relying on the inspect element feature in Google Chrome? I initially thought that was the issue because the links failed to load, but even after correcting it, the show function still does not perform the anim ...

javascriptjqueryhtmlcss

Pattern for Ajax callback in Javascript

I'm facing an issue with the code snippet below. var bar = { ajaxcall : function(){ var _obj = {}; $.ajax({ headers: { 'Content-Type': "application/json; charset=utf-8", 'da ...

javascriptjqueryhtml

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...

javascripthtmlcssvue.jsfigma

Best practices for integrating text and images within a website header using CSS and HTML

I need help figuring out the most efficient method for creating a page header that showcases an image while keeping the text visible for search engines and in case the image fails to load. According to Google, it is recommended to use a <div> for th ...

htmlcss