Changing text with Jquery after a Div

Question

Is it possible to use JQuery to hide the input elements plus the text after the input? The code is generated, so I cannot change the text, wrap it in a span or alter it in any way.

<label>Event Location <span class="req">*</span></label><br>
<input type="radio" name="a22" id="a22_0" value="Lafayette  LA">Lafayette LA<br>
<input type="radio" name="a22" id="a22_1" value="Houston TX">Houston TX<br>
<input type="radio" name="a22" id="a22_3" value="San Antonio TX">San Antonio TX

What is the full structure for this form? The 'text' is not an element as such and so is not selectable except as a text node. — Paulie_D, Dec 11 '14 at 16:02
Is this piece of code has wraped around with some container? — vaso123, Dec 11 '14 at 16:02
Yes, but not trivial. You need to use `contents()` and iterate past the required element to find the text block, then wrap it dynamically in a span and then hide it. — iCollect.it Ltd, Dec 11 '14 at 16:03
You can hide the whole label and inputs by name, but not the text. — vaso123, Dec 11 '14 at 16:03
Added a working example of my previous comment below (based on your updated TABLE/TR/TD HTML posted in your "answer"). — iCollect.it Ltd, Dec 11 '14 at 16:52
Please note: Your question and answer with extra details, are ambiguous as to the aim of this exercise. If you can provide before and after examples of HTML that would help :) — iCollect.it Ltd, Dec 11 '14 at 17:00

iCollect.it Ltd · Answer 1 · 2014-12-11T16:56:26.530

You need to iterate the parent elements (TDs in your example added as an answer), find all the text elements that follow a radio button, then wrap them in hidden spans:

e.g.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/6gzfLorp/3/

$('td').contents().each(function (e) {
    if (this.nodeType == 3 && $(this).prevAll(':radio').length) {
            $(this).wrap($('<span>').hide());
    }
});

Note: Your question is a little ambiguous, but it would appear from your answer you have TDs which you could just hide all contents of the TD using:

http://jsfiddle.net/TrueBlueAussie/6gzfLorp/7/

$('.set-cities td').each(function (e) {
    $(this).contents().wrapAll($('<span>').hide());
});

score 0 · Answer 2 · answered Dec 11 '14 at 16:15

It is wrapped in a td tag. Here's what I have for now:

$("label:contains('Event Location')").parent("td").wrap("<span class='set-cities'></span>");
$('.set-cities').empty();
$('.set-cities').append("<td><label>Event Location <span class='req'>*</span></label><br><input type='radio' name='aa2' id='aa2_1' value='Houston TX' checked='checked'>Houston TX<br></td>");

I just going to change the whole block of text rather than just the city name.

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

In case you wanted to replace the text node directly, here's a way to do it. I borrowed from https://stackoverflow.com/a/298758/728393 and tailored it to your situation

function replaceTextAfter(selector,newtext){
    var textnode = $(selector).parent().contents() // we need to contents as a collection
    .filter(function(){
        return this.nodeType == 3 && $(this).prev().is($(selector)); //return true if node is text and the previous node is our selector
    });
    textnode[0].data = newtext; //change the text
}

replaceTextAfter('#a22_0','abc');

http://jsfiddle.net/z606no23/

edited May 23 '17 at 12:27

Community

1
1

answered Dec 11 '14 at 16:42

DanielST

13,783
7
42
65

Put the HTML (TABLE, TR, TD) shown in the OPs "answer" below and you have a whole new ballgame I'm afraid. The whitespace is driving me nuts :) – iCollect.it Ltd Dec 11 '14 at 16:46
@TrueBlueAussie Bleh, well it serves as an example of how to create a custom solution. I doubt a "robust" solution is possible. – DanielST Dec 11 '14 at 16:56
From my early days of comic books, I think that is spelled "Blech" :) – iCollect.it Ltd Dec 11 '14 at 16:57

score 0 · Answer 4 · answered Dec 11 '14 at 17:42

Thi delete all text after an element done, until a new tag http://jsfiddle.net/alemarch/hm7ey6t5/

 function deleteElemPlusText( elem ) {
     var contestoHtml = $(elem).parent().html()
     var thisHtml = $(elem).get(0).outerHTML  // $(elem).outerHTML()
     var re = new RegExp(thisHtml + "([^<])*")
     var newContesto =  contestoHtml.replace(re, "")
     $(elem).parent().html(newContesto)
 }

function deleteAllElemsPlusText( toDelete ) {
   var x =  $(toDelete).length;
   for (var i = 0; i < x; i++) {
     deleteElemPlusText($(toDelete).eq(0))
   }
} 

deleteAllElemsPlusText( "input[type=radio]" )

note: not all browser have outerHTML properties access, but you can use this jquery plugin http://www.darlesson.com/jquery/outerhtml/

Changing text with Jquery after a Div

4 Answers4