How do I select a string after a radio button, with Jquery?

Question

Code sample:

<table>
<tr>
  <td>
    <input type="radio" name="SomeName" value="3" checked>
    My String $10.00
  </td>
</tr>
</table>

How do I select 'My String $10.00' to hide it from the client?

$('???').next().hide();

Edit:

The HTML above is auto generated..I have no control over it....

Answer 1

$('input[name=SomeName]').parent().text();

If you want to hide that text, you would be best off enclosing it in a paragraph, span or label tag, so you could do something like this:

$('input[name=SomeName]').parent().find('span').hide();

Answer 2

jQuery does not allow easy access to text nodes. Perhaps you could change the HTML to something like the following?

...
<input type="radio" id="myID"/>
<label for="myID">My String $10.00</label>
...

Then you can do:

$("input[type=radio]").next().hide();

or, if you want to have it work no matter the order of the elements or any other stuff in between:

$("input[type=radio]").closest("td").find("label").hide();

---

Since you edited the post to mention you have no control over the HTML, try something along these lines:

// Tiny jQuery extension to provide $().outerHTML();
jQuery.fn.outerHTML = function() {
    return $($('<div></div>').html(this.clone())).html(); 
} 
var radioButton = $("input[type=radio]");
var parentElement = radioButton.parent();
var radioHTML = radioButton.outerHTML();
var hiddenText = radioButton.parent().text();

// Hide the text:
parentElement.html(radioHTML);

// Display the text again:
parentElement.html(radioHTML + hiddenText);

Answer 3

he says he can't control the HTML.

But it's true, you can't access the text node easily to use hide() on it.

Hack sol'n: try reading everything in the into a var, stripping out everything after the tag with a regexp and then re-loading the result.

var chunk = $('input[name="SomeName"]').parent().html();
$('input[name="SomeName"]').parent().empty().append( chunk.replace(/(<[^>]+>).*/, '$1') );

or something like that (not tested)

Answer 4

Since you have no control of the HTML I would go with one of the following solutions.

First solution: I don't think you can use hide() on text nodes in jQuery since that function only operates on elements (I'm speculating). But here's how you can remove the text.

    $(document).ready(function() {
        $("input[type='radio'][name='SomeName']").parent().contents().filter(function() { return this.nodeType != 1; }).remove();
    });

You can read more about contents() here.

Second solution: You can inject span elements around the text nodes and hide the spans.

var parent = $("input[type='radio'][name='SomeName']").parent();
parent.contents().filter(function() { return this.nodeType != 1; }).wrap("<span></span>");
parent.find("span").hide();