Search code examples
javascriptjqueryappendtext

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


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


Solution

  • 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.