How to add and remove html element with java script or jquery?

Question

I have number of checkbox elements are there in my html page

<input type='checkbox' class='txtshow'checked="checked\" id='someid1' name='checkMr[]' value='some value' >
<input type='checkbox' class='txtshow'checked="checked\" id='someid2' name='checkMr[]' value='some value' >
<input type='checkbox' class='txtshow'checked="checked\" id='someid3' name='checkMr[]' value='some value' >

what i want is whenever any of this is checked dynamically one element input type='checkbox' should be added to html page.
if unchecked then remove the element which was added.
same element should no be repeated.

i am new to javascript and jquery so could not try. please help me out ? — Manish Malviya
– Manish Malviya, Commented Oct 25, 2012 at 10:13
javascript is programming laguage and jquery is a framework of javascript ... then search in google to learn about javascript ... there are many tutorials, guides and cookbooks ... and because you asked how to remove and/or add elements you have to learn more about DOM (Document Object Model) ... if you prefer to do this with jquery search in jquery website for the documentation — Memos Electron
– Memos Electron, Commented Oct 25, 2012 at 10:18
I would suggest at least to learn the basics of javascript before using jQuery. — Liviu T.
– Liviu T., Commented Oct 25, 2012 at 10:21

John Koerner · Accepted Answer · 2012-10-25 10:17:28Z

1

On the click event, check if the checkbox is checked. If it is, then add a checkbox, if it is not checked, then remove the checkbox. Use an id related to the parent to link them together:

$(".txtshow").click(function() {
    if ($(this).is(":checked")) {
        newCheck = $("<input type=checkbox id='" + $(this).attr("id") + "-child' />")
        $("body").append(newCheck);
    }
    else {
        $("#" + $(this).attr("id") + "-child").remove();
    }
});

Fiddle: http://jsfiddle.net/nyZj6/6/

answered Oct 25, 2012 at 10:17

John Koerner

38.2k8 gold badges92 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manish Malviya Over a year ago

What to do if i have to append this to form element?

John Koerner Over a year ago

Change the "body" to the selector to the selector to which you would like to append.

Stefano Ortisi · Accepted Answer · 2012-10-25 10:17:21Z

0

you can do this:

$( '.txtshow' ).change(function(){
    var id = $(this).attr( 'id' );
    if( $(this).is(':checked') ){
        $( '<p id="element_' + id + '"></p>' ).appendTo( $( 'body' ) ); 
    } else {
        $( '#element_' + id + ' ).remove(); 
    }
});

Where in this case you create a p element with that custom id. You can change that attribute as you want.

answered Oct 25, 2012 at 10:17

Stefano Ortisi

5,3163 gold badges35 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to add and remove html element with java script or jquery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related