What is the best way to delete the content within a div marked with the class 'node-inner', but only if it includes the text 'href="/test/profile"'?

My HTML looks like this:

<div class="node-inner">         
...
  <a href="/test/profile" title="View user profile.">test</a>
...       
</div> 

Using usercss, I am trying to remove the content of <div class="node-inner"> only if it contains href="/test/profile".

This is my current approach:

.node-inner[class='node-inner'] {
 display: none;
}

However, this approach filters everything. How can I modify it to remove the content of a div with class node-inner only if it contains href="/test/profile"?

Answer №1

To accomplish this task, you can use JavaScript.

Here is an example demonstrating how to achieve this using jQuery:

$('.node-inner > [href="/test/profile"]').css('display', 'none')

Try it out on JSFiddle (jQuery)

Alternatively, here is how you can do it using vanilla JavaScript:

document.querySelectorAll('.node-inner > [href="/test/profile"]').forEach(function(el) {
  el.style.display = "none";
})

Try it out on JSFiddle (JavaScript)

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

Using a CSS-animated DIV as a background with a transparent background DIV overlaid with content on top

In my attempt to overlay bootstrap/html/css on a CSS animated starfield background, I'm encountering some challenges. Online resources suggest using a 1x1 pixel png, but I am looking for a method to implement transparency through coding. Using backg ...

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" text="type/css" href="dis ...

Hovering over a dropdown menu results in the color not completely filling the background of the desired element

.nav-main { background-color:#09F; width:100%; height:100px; color:#FFF; line-height:40px; } .nav-main .logo{ float:left; padding: 40px 5px; font-size:1.4em; line-height: 20px; } .nav-main > ul { margin:0; ...

Switch between CSS and jQuery styling

Here is a code snippet I'm using to toggle the visibility of content: $(function(){ $('#slider').css('display',''); $('#hideslider').click(function(){ $('#slider').slideToggle('slow&apos ...

Attempting to design a uniform question mark enclosed within a circle using CSS

I'm attempting to use CSS to create a glyph of a question mark inside a circle, similar to the copyright symbol ©. a::before { content: '?'; font-size: 60%; font-family: sans-serif; vertical-align: middle; font-weig ...

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. https://i.sstatic.net/Qk5BR.png The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ...

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

The issue of a centered image not displaying properly and the inability to adjust the font

I'm trying to get the image to display bigger and in the center, but no matter what I try it's not working. HTML: <div class="content-grid"> <img src="test.jpg" /> </div> CSS: .content-grid img{ display: block; margin: ...

Comparing the Absolute anchor tag to the anchor tag with an absolute span

I have come across two methods for extending a link over a card, container, div, or any other element in order to make the entire area clickable. The first approach involves positioning the <a> tag as an absolute element. The second method keeps th ...

The text-overflow property with ellipsis functionality appears to be malfunctioning in Internet Explorer when applied to input elements, yet functions

Having an issue with the MS IE (version 11) when using the text-overflow: ellipsis; property for an input field. It appears that this specific property is not working properly in this browser. If anyone has any suggestions or solutions, it would be greatl ...

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

The alignment of Bootstrap Select dropup with search results is off

I've encountered an alignment issue with bootstrap select live search (selectpicker). The dropup menu is misaligned when showing search results, but strangely, the alignment corrects itself after scrolling the page. Interestingly, this issue doesn&apo ...

When the height of the html and body is set to 100%, ScrollY/ScrollTop is unable to function properly

Utilizing height: 100% and overflow: auto on html/body has helped me fix a scrolling issue in Chrome. However, I've noticed that ScrollY and ScrollTop always return 0 now. Is there a way to determine the scroll position in this scenario? Here is the ...

The box shadow comes to a halt just shy of reaching the bottom of the

I'm having an issue with my box shadow on the body element. Everything looks great until I add content that causes the page to scroll beyond the viewport. The background of the body continues, but the box shadow stops short. Is there a way to extend t ...

Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...

Switching back and forth between different rows within a table

Currently, I am just starting out with AngularJS (1.5) and I have come across a challenge that I am hoping to get some assistance with. I have a table that is generated dynamically and for each row, I need to add a down arrow in the first column. Based on ...

Adjust the top value of a tooltip in Foundation 4

How can I adjust the tool tip text top value to avoid it hovering over icons? To get a clearer view of the issue, check out the screenshots provided. If you notice any other formatting issues with my HTML text, please don't hesitate to inform me. (Jus ...

In search of a CSS selector that can target elements based on specific text contained within them

Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...