jQuery.next on a text snippet with no selector

Here's some example code:

<input type="checkbox" id="send-notice" name="send-notice" value="1" /> This is a notice to all users.  

<label for="subject">Subject</label>

I want to be able to select the text "This is a notice to all users." so I can remove it.

I'开发者_C百科m not sure how to do so though.

I've tried using jQuery('#send-notice').next(), but that selects the <label for="subject"> block.

I also tried wrapping a <div> around the text using jQuery('#send-notice').after() and a closing </div> tag on jQuery("label[for='subject']").before(). But jQuery doesn't like unopened elements.

Any help here?

You want to operate on textnodes, and jQuery steers clear of textnodes. Since you can't wrap the text you want to change in a span or something like that, you can, with some effort, identify the textnodes and do some surgery. This is thrown together quickly, but seems to work:

    /* utility function to help us skip whitespace-only nodes */    
    function isWhitespace( thenode ) {
        return !(/[^\t\n\r ]/.test( thenode.data ));
    }   

    /* attach this function to ready() or other trigger */
    function fixtext(){
        $('div#main')
            .contents()
            .filter( function() {
                return !isWhitespace(this) && this.nodeType == 3;
                // nodeType 3 means textNode. Force jQuery to ingest.
            })
            .each( function(){
                $(this).replaceWith( document.createTextNode('Your new text') );
            });
    }

This can certainly be reduced and streamlined, but it seems to work using the information in your question, and should give you a starting point on the approach. It doesn't rely on matching your string exactly -- just that the string will be positioned in some larger container (I have it as div#main here), and it won't have any non-whitespace siblings. Even if your case is more complex, as long as the text is consistently placed you should be able to identify it within the filter() function.

jQuery won't be of too much help here, since its strength is in traversing the DOM, and you don't have a node for it to traverse to here.

I suspect the best you're likely to do is something like...

var html = $('#parent-element').html();
html = html.replace("This is a notice to all users", '');
$("#parent-element").html(html);

That is: a brute force replacement of the text. Some simple pattern matching could come into play if you want a little protection against the text changing.

var html = $('#parent-element').html();
html = html.replace(/<input type="checkbox" id="send-notice" name="send-notice" value="1" />.*?</, '');
$("#parent-element").html(html);