jquery text().replace('','') not working

Question

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

Answer 1

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,'') ) ;

Answer 2

$( "#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();
});

Answer 3

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.

Answer 4

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.