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

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.