Remove and replace append on click

Question

I've appended in jquery a "string" and want to delete it and add a new "string" on.

Created a simple markup to show

<a href="#">Test</a>
<button>remove</button>

var c = " closed";
var o = " open";
$("a").append(c);
$("button").click(function(){
 $("a").find(c).replaceWith(o);
  $("a").append(o);
});

http://codepen.io/denniswegereef/pen/KpOjpr

Answer 1

Jquery works with elements, not texts.

var c = " closed";
var o = " open";
var el_c = $('<span>').text(c);
var el_o = $('<span>').text(o);
$("a").append(el_c);
$("button").click(function(){
    el_c.replaceWith(el_o);
});

Answer 2

You will want to encapsulate your string into a SPAN or DIV that you want to change like this:

<a href="#">Test <span>closed</span></a>

With this structure you can change the innerHTML of the SPAN within the A like this:

$('a span').html(o);

OR:

$('a span').html(c);

Answer 3

Your whole can replace with

$("button").click(function() {
  ($("a span").text() === "open") ? $("a span ").text("close") : $("a span").text("open");
});

http://jsfiddle.net/5vpn82c0/3/

Answer 4

Check this solution using html()

 var c = " closed"; var o = " open"; var a = $('#anchor'); a.append(c); $('#btn').click(function(){ var txt = a.text(); var prefix = 'Test'; if(txt.indexOf(c) != -1) { a.html(prefix + o); } else if (txt.indexOf(o) != -1) { a.html(prefix + c); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="anchor" href="#">Test</a> <button id="btn">remove</button> 

Answer 5

I guess this pen does what you wanted to achieve: http://codepen.io/anon/pen/zGgVzG

var c = " closed";
var o = " open";
$("a").append(c);
$("button").click(function(){
    $("a").text($("a").text().replace(c, o));
});

You can't use jQuery's find() and replace methods to replace text. These work on dom elements, not on strings. Use the text function to set the link's text and use JavaScript's native replace function to do text replacements. To clarify, the following code does the same as above, but might be easier to understand:

var c = " closed";
var o = " open";
$("a").append(c);
$("button").click(function(){
    var linkText = $("a").text();
    var replacedText = linkText.replace(c, o);
    $("a").text(replacedText);
});

Answer 6

create two span with two different classes. named 'close' and 'open'. then a flag

var s_c = '<span class="close">close</span>';
var s_o = '<span class="open">open</span>';
var flag = 'c';
$("a").append(s_c);
$("button").click(function(){
    if(flag == 'c')
    {
        $("a").find('span').remove();
        $("a").append(s_o);
        flag = o;
    }
    if(flag == 'o')
    {
        $("a").find('span').remove();
        $("a").append(s_c);
        flag = c;
    }
});

remember this code is use for toggling the text...! once append the open once close... if you looking for just once, somebody answers on top . good luck !