Below is the HTML code:
<td>
<a class="link" href="#">
<span class="download">Link</span>
</a>
<a class="link" href="#">
<span class="csvdownload">Link 2</span>
</a>
</td>
I am looking to apply the following CSS:
a.link {
display: none;
}
This CSS should only be applied to the <a> element that contains the csvdownload class in the span.
It would be great if this could be achieved using pure JavaScript without relying on a plugin like jQuery...
When modifying the markup, consider using this improved version:
<td>
<a href="#">Link</a>
<a class="csvdownload" href="#" style="display:none">Link 2</a>
</td>
The CSS class "link" for <a> tags is unnecessary if they are already links. Instead of using .link in your CSS rules, simply use a. To hide the csvdownload link, apply display:none directly to its class.
If you still require the "link" class for styling purposes, you can combine it with another class like this:
<td>
<a class="link download" href="#">Link</a>
<a class="link csvdownload" href="#" style="display:none">Link 2</a>
</td>
let spanList = document.getElementsByTagName('span');
for (let j=0, k=spanList.length;j<k;j++) {
if (spanList[j].className=="csvdownload") {
spanList[j].parentNode.style.display='none';
break;
}
}
It's recommended to test the textnode in Firefox.
In addition to what was previously mentioned, you also have the option of utilizing:
var byClass = document.getElementsByClassName,
el;
if (byClass) {
el = byClass('cvsdownload');
} else {
var spans = document.getElementsByTagName('span');
for (var i = 0, n = spans.length; i < n; i++) {
if (spans[i].className == "csvdownload") {
el = spans[i];
break;
}
}
}
if (el) {
el.parentNode.style.display = 'none';
}
Whenever possible, it is generally more efficient to rely on the existing methods provided.
When there are no CSS rules applied to a.link that would define its width/height without content, you can hide the parent element by simply adding display: none; to span.csvdownload. This action will produce the same outcome without the need for Javascript - just include it in your stylesheet.
Currently working on implementing authentication with NodeJS, expressJS, mongodb and React Native. Is it acceptable to include multiple variables in the token object like shown in this example? const token = jwt.sign( { userId: user. ...
I can't seem to get this bootstrap carousel to switch slides, whether I use the indicators or arrows. My other carousel works perfectly fine and I've added all necessary Bootstrap and JavaScript CDNs. I'm puzzled as to why it's not func ...
I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...
Need help retrieving the integer from the response obtained through an axios get request Here is what I see in the console log: https://i.stack.imgur.com/ztmf0.png setDappList([response.data.stats]); <div>{setDappList.total}</div> Unfortuna ...
JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...
Trying to transmit JSON data from a web page using JQuery, as shown below: $.ajax({ type: "post", url: "http://localhost/ajax/login", data: '{username: "wiiNinja", password: "isAnub"}', dataType: "json", contentType: "applica ...
I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...
Just starting out with JavaScript. Trying to display additional values in the console. Uncertain about how to access add-ons. Can anyone help me troubleshoot? Here is my code snippet below: https://jsfiddle.net/6f8upe80/ private sports: any = { ...
Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...
While I've come across plenty of examples on how to create xhr requests from Firefox Add-ons, I'm currently exploring the new WebExtensions framework (where require and Components are undefined) and facing an issue with sending a simple XmlHttpRe ...
My goal is to save items in local storage as an array of objects. Initially, it works perfectly and stores the first element in local storage as needed. However, I am facing an issue where I cannot store more than one element. Below is the code block that ...
I am encountering an issue with parsing a JSON string encoded with PHP 5.2 json_encode(). Here is the JSON string: {"foo":"\\."} Although this JSON string is valid according to jsonlint.com, when using the native JSON.parse() method in Chrome a ...
TEST FILE import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform- browser/animations'; import { ManagePageComponent } from './manage-page.component& ...
I have encountered an issue where I am capturing the HTML content of a page and attempting to send it as a string to a PHP web service using jQuery's ajax() function. However, when I receive the parameter on the PHP side, the &s in the URLs present wi ...
I have come across a few questions here that somewhat address the issue, select all managed state of controlled checkboxes but none of them provide a solution for rendering a component with a checkbox. What I want is something like this, render: funct ...
I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...
I recently added the following code to my aspx page: <script src="../Scripts/jquery.responsivetable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#grdStudent').responsiveTable( ...
I've been trying to work on this issue using React and local host, but it keeps showing the direct file instead of the website. I've been stuck on this problem for the past 3-4 hours and still haven't been able to find a solution. I'm h ...
I am attempting to separate the words in the following sentence and enclose them in individual span elements. <p class="german_p big">Das ist ein schönes Armband</p> I came across this: How to get a word under cursor using JavaScript? $(&ap ...
Here is my code sample, which I would like to use for practicing with jQuery's ajax function. Note that I have already installed the jQuery package using npm install jquery: var $ = require('jquery'); var remoteValue = false; var doSometh ...