CODEWITHSUNDEEP
javascriptjquerydom
MacSalty
MacSalty

Reputation: 1242

Removing and Appending in the DOM

I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't.

This is what I'm currently working with code wise:

$('#ResultsNoData1').click(function () {
    var parent = document.getElementById('Results1').parentNode;
    var child = document.getElementById('Results1');

    if (this.checked) {
        parent.removeChild(child);
    }
    else {
        parent.appendChild(child);
    }
});

My original design worked by doing the following:

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('.results1').hide() : $('.results1').show();
});

However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.

Current example

Upvotes: 2

Views: 97

Answers (4)

lokeshjain2008
lokeshjain2008

Reputation: 1891

You are doing it right way but missing one small thing need to remove value from the textbox.

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});

or

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});

And this is the right way(show/hide) the textarea.

Upvotes: 0

Brian Hoover
Brian Hoover

Reputation: 7991

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
    (this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});

JSFiddle

Upvotes: 0

Harshit Tailor
Harshit Tailor

Reputation: 3281

You need to show and hide that TextBox not remove.

$('#ResultsNoData1').click(function () {    
    if (this.checked) {
        $("#Results1").hide();
    }
    else {
        $("#Results1").show();
    }
});

Working example

Upvotes: 2

Jack
Jack

Reputation: 8941

Here you go: http://jsfiddle.net/cx96g/5/

Your issue is that you were trying to set parent inside your click, but once child is removed it would fail.

var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
    if (this.checked) {
        node = parent.removeChild(child);
    }
    else {
        parent.appendChild(child);
    }
});

Upvotes: 2

Related Questions