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.
Utilizing the AWS Service IotData within an AWS Lambda function requires the use of the AWS SDK. When constructing the IotData service, it is necessary to provide an IoT endpoint configuration parameter. To achieve this, another service is utilized to obta ...
Having trouble solving a problem, despite looking at examples and reading posts about the method. The error I'm encountering is: TypeError: $.validator.methods[method] is undefined Below that, it shows: result = $.validator.methods[method].call( t ...
When working with AngularJS, there are various ways to provide an external template, such as using a script tag or a separate HTML file on the web server. However, I am faced with a situation where I need to implement a custom logic for retrieving these ...
Within a child component, there is an onClick event: onClick={()=>{ //2. an image is clicked, and the choice is added to the choiceOrder state, and then a jsonupdate is called -- 3. in ChooseBy.js //onclick, add or remove the choice choosebyprop ...
Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...
I am currently working on a project using vue.js to showcase information from an Airtable database. I am looking to implement a filtering functionality for the data displayed. The table contains education details, including subject information like biology ...
$(document).ready(function(){ var i = 1; $('#add').click(function(){ if(i < 5){ i++; $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="form-group">& ...
At first, I created an image magnifier that would zoom in when the user hovered over the image. However, now I am looking to switch to a lens zooming method that uses only one image. ...
When attempting to customize the scroll behavior of a MatSelect in a regular page, I discovered that using the MAT_SELECT_SCROLL_STRATEGY injection token with the NoopScrollStrategy allows for scrolling the underlying page while keeping the MatSelect stati ...
Within my code, there is a router setup: fastify.get('/:link', (req, reply) => { req.params.url = req.host+req.url; reply.view("template.ejs",req.params); }); I am trying to capture URLs and process them in the template. All URLs are ...
I am currently facing an issue with the configurations on my asmx page. The code is set up like this: using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.Script.Serialization; using Syst ...
If we have a JSON stored in the variable person like below: { "firstName": "First Name", "lastName": "Last Name", "address": { "city": "New-York", "street": "Some Street" } } To access the value of street, we would typical ...
I am facing an issue with two URLs residing on the same server, mydomain.com and api.mydomain.com In order to handle access-origin in my API, I have included the following code snippet: app.use(function (req, res, next) { // CORS headers res.head ...
As a newcomer to the world of Javascript and node.js, I am venturing into creating a REST API with URLs structured as follows: /user/{userId}/docs The goal is to extract the value of {userId}, which, for instance, in the URL /user/5/docs would be 5. Wh ...
In a scenario where an array of strings needs to be sorted based on multiple criteria, such as copying a list of directory paths, consistency in the result is crucial regardless of the initial order of the input. The following requirements need to be met: ...
Currently, I am working on developing a feature in NodeJS that allows users to upload files. However, I am encountering difficulties while attempting to make a simple POST request. In my index.ejs file, I have written code that generates a form and initia ...
I need help with adding a link to the last item in my menu items array. Currently, the menu items are generated from a component, but I'm unsure how to make the last item in the array a clickable link. ActionMenuItem.component.html <div *ngIf= ...
Curious to learn more about recompose, my journey began with a basic component: const timer: React.SFC<MyProps | any> = ({ seconds }) => ( <span>{ seconds }</span> ); I wanted to find a way to pass the seconds prop using recompose, ...
In the Vue Component code snippet below, I have a method: loadMaintenances (query = {}) { this.getContractorMaintenances(this.urlWithPage, query).then((response) => { this.lastPage = response.data.meta.last_page }) } I am trying to pass the par ...
I am in the process of developing a unique UEFA Champions League 24 'Swiss Model' tournament with 36 teams. Each team is set to compete against 8 different opponents, resulting in a total of 144 matches. I already have a list of matchups prepared ...