CODEWITHSUNDEEP
javascriptjquery
Dennis
Dennis

Reputation: 368

Remove and replace append on click

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

Upvotes: 2

Views: 461

Answers (6)

Mehrdad Pedramfar
Mehrdad Pedramfar

Reputation: 11073

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 !

Upvotes: 1

igorshmigor
igorshmigor

Reputation: 802

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);
});

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

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>

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

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/

Upvotes: 1

SalDev
SalDev

Reputation: 388

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

Upvotes: 1

Radek Pech
Radek Pech

Reputation: 3098

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);
});

Upvotes: 3

Related Questions