0

Hi I am trying for hours now to remove a text string again after I have appended it.

I have a script that handles an accordion and I have some redundancy in text in it. So I want to add and remove the redundant text on opening or closing the accordion row.

Here is my code:

var redundantText = "text text text <a href=\"#contact\">Contact Me</a> text text text";

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").append(redundantText);
});
$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
  $("#redundant_text_wrapper").text().replace(redundantText, '');
});

The append works fine but the text().replace() does not. So if I open and close the accordion row several times it always appends the redundantText but never removes it so that the redundantText gets even more redundant.

Edit: changed 'redundantText' to redundantText. Still does not work

Edit2:

$("#redundant_text_wrapper").text($("#redundant_text_wrapper").text().replace(redundantText,''));

also does not help, it only removes the link but the text stays

Edit3:

$( "#redundant_text_wrapper").text(function(index, currentText) {
    return currentText.replace(redundantText,'');
});

also does only remove the link, text stays

Tris
  • 151
  • 1
  • 10

4 Answers4

3

That should be:

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace('redundantText','') ) ;

Or if you want to replace all occurrences:

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace(/redundantText/g,'') ) ;
PeterKA
  • 24,158
  • 5
  • 26
  • 48
3

$( "#redundant_text_wrapper").text().replace('redundantText','') just gets the text value, replaces it and does nothing with the result, so this line is ironically redundant.

Also as your redundantText contains html, you should probably be using html() instead of text().

If you want to manipulate the existing html of an element, you should use the overload of html() which takes a function (there is also the same available for text()). This receives the current HTML of the element and returns the new HTML to set:

$( "#redundant_text_wrapper").html(function(index, oldHtml) {
    return oldHtml.replace(redundantText,'');
});

Saying all that, replacing the whole contents of the wrapper is less efficient and can break things like existing event handlers on elements inside it. I would say it is preferable to put your redundant text into another element, such as a <span>, and add and remove that instead (or just show and hide it):

// wrap it all in a <span> - give it a class to be sure
var redundantText = '<span class="redundant">text text text <a href=\"#contact\">Contact Me</a> text text text</span>';

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").append(redundantText);
});

$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
  // just find the span and remove it
  $("#redundant_text_wrapper > span.redundant").remove();
});
Rhumborl
  • 16,349
  • 4
  • 39
  • 45
  • You are right, although it was just a typo in my post. I had no quotes around the variable. – Tris Jan 19 '15 at 14:00
0

Change 

$( "#redundant_text_wrapper").text().replace('redundantText','');

To: 

$( "#redundant_text_wrapper").text().replace(redundantText,'');

Remove the quotes around the variable. That way it will be seen as a variable and not as a string.

Or 

$("#redundant_text_wrapper").text($("#redundant_text_wrapper").text().replace(redundantText,''));

This way it will first get the text than replace it and set it.

SuperDJ
  • 7,488
  • 11
  • 40
  • 74
  • that was a mistake in my post, I had that. Does not work anyway :( – Tris Jan 19 '15 at 13:57
  • Have you also tried it with `html()` instead of `text()`. As `html()` will also get the html tags of the `a href` – SuperDJ Jan 19 '15 at 13:59
0

Ok, I tried a different approach now:

var redundantText = "<span id=\"redundantText_wrapper\"> text text text <a href=\"#contact\">Contact Me</a> text text text</span>";

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").after(redundantText);
});
$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
   $('#redundantText_wrapper').remove();
});

So basically I use 'after' instead of 'append' and put the text into a span with ID. Now I can use $('#ID').remove(); to get rid of it on closing the tab.

Tris
  • 151
  • 1
  • 10
  • this is ok, except you now temporarily have duplicate IDs in your html which is invalid – Rhumborl Jan 19 '15 at 15:01
  • Hm, I don't see what ID would be duplicate. When I open the next Tab the oder one automatically closes. So that the hide.bs.collapse function triggers and deletes the #redundantText_wrapper from the other Tab. And for all the other tabs there are IDs like #collapse_2, #collapse_3 – Tris Jan 20 '15 at 08:54