CODEWITHSUNDEEP
javascriptjquery
brasay
brasay

Reputation: 135

remove string when checkbox unchecked

I have a function in my app when the user checks the checkbox, some text is appended to a label which already contains some text. The thing that I want to do now is that if the user unchecks the checkbox, the text that was just added has to be removed. The basic text may not be removed.

I have the following code: HTML:

<input id="chkbox1" type="checkbox" />
<label id="lbl1">this is a test</label>

JQuery:

$('#chkbox1').click(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "\n Jürgen \n Marketing und Vertrieb \n e-mail:[email protected] \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n ";
        $('#lbl1').append(vcard);
    } else {
        $('#lbl1').replace(vcard, '');
    }
});

Any help would be appreciated.

Upvotes: 0

Views: 811

Answers (6)

user2575725
user2575725

Reputation:

If the text is not dynamically loaded, then why not put it into html itself and simply show/hide the content:

$(function() {
  $('#chkbox1').on('change', function() {
    $('#txt').toggle(this.checked);
  }).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="chkbox1" type="checkbox" />
<label id="lbl1">this is a test<span id='txt'><br/>Jürgen <br/> Marketing und Vertrieb <br/> e-mail:[email protected] <br/> anschrift In test 18 <br/> 40599 Düsseldorf <br/> Deutschland <br/> website www.test.de <br/> telefon +49 211 123456789 <br/> mobil +49 177 123456789 <br/> fax +49 211 123456789 <br/></span>
</label>

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try a better solution, you can append a span and remove it without using replace like,

var vcard = "\n Jürgen ... +49 211 123456789 \n ";
$('#chkbox1').click(function () {        
    if (this.checked) {        
        $('#lbl1').append(<'span id="span-vcard">'+vcard+'</span>');
    } else {
        $('#lbl1').find('#span-vcard').remove();
    }
});

Upvotes: 0

Paresh Makwana
Paresh Makwana

Reputation: 189

Try to write this code,

$('#chkbox1').change(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "\n Jürgen \n Marketing und Vertrieb \n e-mail:[email protected] \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n ";
        $('#lbl1').append(vcard);
    } else {
        $('#lbl1').html('');
// or   $('#lbl1').empty();
    }
});

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

see this. http://jsfiddle.net/naeemshaikh27/en1p676b/

put the text in a span and then uppend if the checkbox is checked else remove the span.

$('#chkbox1').click(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "<span>\n Jürgen \n Marketing und Vertrieb \n e-mail:[email protected] \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n</span> ";
        $('#lbl1').append(vcard);
    } else {
        $('#lbl1').find("span").remove();
    }
});

Upvotes: 1

Jim
Jim

Reputation: 22646

I would just place a span inside the label then set/empty this:

<label id="lbl1">this is a test<span id='lbl1DynamicText'></span></label>

$('#chkbox1').click(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "\n Jürgen \n Marketing und Vertrieb \n e-mail:[email protected] \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n ";
        $('#lbl1DynamicText').text(vcard);
    } else {
        $('#lbl1DynamicText').text('');
    }
});

Upvotes: 4

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can set the empty html:

$('#lbl1').html('');

Upvotes: 0

Related Questions