Is it possible to hide the content between parentheses in the following HTML using CSS or jQuery? The challenge is that the parentheses and text inside them are not wrapped in any div, making it difficult to target with CSS.
<span>
<a class="test" href="#">test</a>
(<a href="#">?</a>)
</span>
$('span a:not(".sample")').hide();Nevertheless, if you want to hide the parentheses as well, you will have to create a custom function to remove only the unwanted code:
$('span').html(function(i,old) {
return old.substring(0,old.indexOf('('));
});​
If you prefer to hide it instead of deleting it, you can wrap everything in an HTML element and apply styles to it accordingly:
$('span').html(function(i,old) {
var idx = old.indexOf('(');
return old.substring(0,idx) + '<span style="display:none">' + old.substring(idx) + '</span>';
});​
Have you experimented with utilizing the CSS property display:none; to hide it?
It's not possible to conceal specific sections of DOM nodes, only entire nodes.
To achieve this effect, you should modify your HTML code to enclose the entire link along with the parentheses in a single <span>.
While you could accomplish this using Javascript, it would be much simpler to make these changes directly at the source.
To achieve this in jquery:
$('.test').next().hide();​
Only the brackets will remain visible after executing this code.
After reading your post multiple times, it seems like I understand what you're looking to achieve. Unfortunately, accomplishing your request directly is not feasible.
If you have the ability to modify the HTML code, my suggestion would be to enclose the content you wish to conceal within an inner span and then hide it.
If the reason you are inquiring about this is because you cannot edit the HTML, here's an alternative approach:
To implement actions, add specific classes to elements.
<span>
<a class="go" href="#">click here</a>
(<a href="#" class="hideme">hide me!</a>)
</span>
$('.go').bind('click', function(e){
$('.hideme').hide();
});
I am looking to create a customized box within the Appbar that spans the full height, as illustrated in the image below: https://i.stack.imgur.com/CFMo0.jpg However, the default Appbar provides padding from all sides to its internal elements, leading to ...
My problem is perfectly summed up by the title. I am attempting a cross domain request where the loaded content needs to be executed first. For instance, I have a page on www.xyz.com that loads content via ajax (such as a live ticker) and I want to integ ...
I'm trying to determine if there is exactly one div with an error class. If so, I want to use the .select() method to select the content of the corresponding input (within that input's parent div). Any ideas on how to achieve this? This is my a ...
Within this particular implementation, I have utilized an md-sidenav component with a local template variable #sidenavsearchArea. <md-sidenav #sidenavSearchArea align="" mode="push" opened="false"> sidenav content here.. </md-siden ...
Recently, I've been tinkering with updating a file in my GitHub repository using code to set up an automated system for pushing changes without manual intervention. My approach involved creating a function that utilizes a GitHub access token to ' ...
Occasionally, an aggravating red line will appear unpredictably when adjusting the size of this component using its split bar located at the top edge of the component. I managed to find a way to permanently eliminate the red line by removing its CSS class ...
function var1() { console.log("inside function one"); var varval1 = "purpose"; alert("value of var one is" + varval1); return varval1; } function var2() { console.log("within function two"); alert("value of var two is" + varval1); ...
I am attempting to concatenate and display 4 items in a dropdown list using AJAX. For example, the value in the dropdown list should appear as (127, CoilWt, 1, KGS) from the database. In the database, I am selecting select CODE_VALUE, CODE_DESC, CODE_SUB ...
As I navigate through the early stages of learning ajax, a simple javascript function comes into play. This function utilizes jQuery.ajax() to send server data and retrieve a basic text response. The server successfully triggers the function as anticipated ...
I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...
I couldn't find a solution to evenly spacing out a series of list items for a menu styled list. After realizing CSS alone wasn't enough, I decided to incorporate some javascript (jQuery). My goal was to have equal padding between each LI without ...
​<div id='container'> <div class='left'></div> <div class='right'></div> <div class='clear'></div> </div>​​​​​​​​​​​​​​​​â ...
<div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br /> <div class="content" data-brand="Hill" d ...
I am in the process of developing a small-scale project on creating Universal Identification Numbers, similar to that of college level projects. My goal is to design a page with tabs for different databases, so that when I press the key 'A' for a ...
Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...
Currently, I am utilizing TailwindCSS and daisyUI to construct a dropdown menu. The code for it can be found below. The issue that I am facing is when a dropdown menu item is selected (activated), it turns purple, despite applying the utility class bg-whi ...
I experimented with using divs as clickable buttons that direct to another page on my website. I added animations to make them rotate into view when the site is loaded. Now, I'm trying to implement a hover effect that will scale the buttons when hover ...
When utilizing Twitter Bootstrap, the validation classes like has-error or has-warning must be added to the wrapping form-group element to style both the input and its label. However, Knockout-Validation directly adds the class to the input element itself. ...
I am looking to display the table rows based on the event selected from a DropdownList ID. Below is my HTML table structure: $(function () { debugger $.ajax({ type: "POST", contentType: "application/json; charset=u ...
Currently, this is the code I am working with. The JavaScript functionality is working well, however, there seems to be an issue where the image does not return to its original size on a second click. Additionally, I am having trouble getting the CSS to ce ...