Conceal content within SPAN element using Class and Title attributes

I need to conceal the text within a <span> element, but with specific wording:

<span class="ms-RadioText" title="Created / Criar"><input id="ctl00_m_g_178a35bf_4d92_4887_8b39_b6e6e11d4a09_ff21_ctl00_ctl00" type="radio" name="ctl00$m$g_178a35bf_4d92_4887_8b39_b6e6e11d4a09$ff21$ctl00$RadioButtons" value="ctl00" checked="checked" /><label for="ctl00_m_g_178a35bf_4d92_4887_8b39_b6e6e11d4a09_ff21_ctl00_ctl00">Created / Criar</label></span>
<span class="ms-RadioText" title="Change / Alterar"><input id="ctl00_m_g_178a35bf_4d92_4887_8b39_b6e6e11d4a09_ff21_ctl00_ctl01" type="radio" name="ctl00$m$g_178a35bf_4d92_4887_8b39_b6e6e11d4a09$ff21$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_m_g_178a35bf_4d92_4887_8b39_b6e6e11d4a09_ff21_ctl00_ctl01">Change / Alterar</label></span>

I have a requirement to hide the content of elements with the "ms-RadioText" class and the title attribute "Created / Criar"

jquerycsshtml

Answer №1

To hide a specific element, target it using this code:

$('span.ms-RadioText[title="Created / Criar"]').hide();

Keep in mind that the attributes selector is also functional in CSS3.

Answer №2

 //The following code snippet eliminates the element from view
 $('span.ms-RadioText[title="Created / Criar"]').hide();  

 //This does the same as the previous line of code
 $('span.ms-RadioText[title="Created / Criar"]').css('display', 'none'); 

 //Although it remains in the document flow, this code makes the element invisible
 $('span.ms-RadioText[title="Created / Criar"]').css('visibility', 'none');

Answer №3

If you want to hide an element with the title selector, use the following code:

.ms-RadioText[title='Hidden / Oculto']
{
  visibility: hidden;
}

See a live example here.

Answer №4

If you want to hide an element using jQuery, you can use the following selector:

$('span.ms-RadioText[title="New / Novo"]')

To achieve the desired result, simply combine this with jQuery's hide() function like so:

$('span.ms-RadioText[title="New / Novo"]').hide();

Check out this JavaScript Demo

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

Seamless transition animation using jquery

I'm attempting to create a smoother transition when the button is clicked, but so far it's not working as expected. I tried using $slideToggle, but I may have implemented it incorrectly. <button class="btn btn-warning" id="btn-m ...

jqueryhtml

Issue with SALON theme causing logo to not display on Wordpress site

It's puzzling why the logo image I uploaded to the WP theme isn't showing up on the front-end. I've reached out to the theme developers multiple times, but it's been two months without a response, and my client, as well as myself, are ...

csswordpressthemes

What is the process by which Quora loads two distinct webpages using one URL?

Have you ever noticed that when you visit without a Quora account, you are directed to a login or sign up page? But if you do have an account and visit the same URL, you're taken straight to your personalized feed. How does Quora manage to display di ...

javascripturlhtmlquora

Style the input element for typeahead functionality

I am working on a simple textbox input that has the following appearance: <input type="text" placeholder="Search for states"> My goal is to implement an autocomplete feature similar to typeahead. While I have successfully implemented the autocomple ...

javascriptjqueryhtmlcss

Configuring mobile devices for a sliding form using jQuery

After building a form based on the tutorial from (http://tympanus.net/Tutorials/FancySlidingForm/) for my website, I encountered some issues. While it works well on my computer and adjustments were made for responsiveness on tablets and smartphones using r ...

jqueryformsjquery-mobileresponsive-design

Revert TinyMCE container

I need assistance with clearing the content inside the editor box of TinyMCE when a button on my form is clicked. The editor I am using can be found here. Could you provide guidance on how to achieve this? ...

javascriptjqueryasp.nettinymce

Strategies for Updating Backgrounds on Individual WordPress Pages

I am looking to revamp a WordPress blog with 5 different pages, each requiring a unique background image. Is there a method to achieve this without altering the background element, but instead changing the background image of the #main element in my CSS? ...

htmlcsswordpresswordpress-theming

Expanding the Width of a Web Page with CSS on a Squarespace Website

Looking to adjust the width of my Squarespace website on the SKYE template to have minimal padding around images and content. Check out the website here using the password123. I've attempted to make changes with no success using the following code: ...

csssquarespace

Dealing with AngularJS ng-model problems when duplicating a form

Currently, I am facing an issue with sending parameters to control and require some guidance. I have multiple types of questions within the ng-repeat loop named 'question' that I am iterating through. The problem arises when there are two questi ...

javascriptjqueryangularjs

Display one div in Code Igniter, or if not, display an alternative div in the view

I am trying to implement a conditional display of divs in my View based on the response from the controller. If the request is successful, I want to show the success div, otherwise, display the failure div. Currently, I am displaying true and false in aler ...

phpjqueryajaxcodeignitercontroller

The WordPress website encounters a jQuery Ajax call failure without any response

I'm currently developing a custom WordPress plugin and encountering an issue with one specific jQuery Ajax call within the code. The call is located inside an 'onbeforeunload' function, but I don't think that's causing the problem. ...

jqueryajaxwordpress

Unexpected behavior with Bootstrap classes

I have come across the following HTML code which appears to be using bootstrap, however, it is not responsive. It is supposed to be responsive and adapt to mobile and tablet devices, but it still displays the desktop view on mobile and tablet screens. < ...

htmlcssangulartwitter-bootstrapbootstrap-4

hover effect with fading transition while mouse is still hovering

Is there a way to create a fade-in/fade-out effect on a div without the mouse needing to leave the area? Let me provide a clearer explanation: When the mouse enters the object The object gradually fades in Then, after a delay, the object fades out while ...

javascriptjquerycsshover

"Triggering an AJAX POST request with a click event, unexpectedly receiving a GET response for

Hello there! I am currently attempting to send an AJAX POST request when a button is clicked. Below is the form and button that I am referring to: <form class="form-horizontal" > <fieldset> <!-- Form Name --> <legend> ...

javascriptjqueryajax

Can a div be relocated within another div based on a random roll of the dice?

Hey there, I'm currently working on creating a simple Monopoly-style game. As someone who is pretty new to JavaScript, I'm looking to figure out how to move the game piece around the board based on dice rolls. Any guidance or assistance would be ...

javascripthtml

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

javascripthtml

Enhancing the tooltip inner content in Bootstrap with a description:

Can you help me troubleshoot the code below? I am trying to add a description to numbers in my tooltip, but it doesn't seem to be working. Here is the HTML: <input id="contract-length" class="slider slider-step-2 slider-contract-length" ...

javascripthtmltwitter-bootstrap

Tab button that can be easily printed

I'm currently facing a challenge with my HTML code on my website. I have 5 tabs already set up, but I want to add one that redirects users to a printable page that opens the print menu specific to their browser. It seems like there might be an issue i ...

htmlcssprintingtabsuser-controls

Encountering a Laravel 419 Error due to CSRF Token verification problem during Ajax request handling

I'm running into a Laravel 419 error when using Ajax and I'm unsure of the cause. I've read in other posts that it might be related to the csrf token, but since I don't have a form, I'm not sure how to resolve this issue. Here&ap ...

phpjqueryajaxlaravel

Cleaning PHP sessions upon page unload is a common task that many developers need to tackle

Is it possible to clear a session variable by calling the server side using AJAX or jQuery? I currently have a Facebook application that relies on PHP session variables for its behavior. I am looking for a way to clear these session variables when the use ...

phpjqueryajax