jquery clone an html structure with out text content

Question

every one. please help me.

how to clone an html structure ( with tables and input field ) without its input content.

this is my html code

<div class="clone_wrapp">
            <div class="clone_table">
                <div class="two_column_table">
                    <table>
                        <tr><td>Name of officer-in-charge</td></tr>
                        <tr><td><input type="text"></td></tr>
                        <tr><td>Contact No</td></tr>
                        <tr><td><input type="text"></td></tr>
                    </table>
                </div>  <!-- two_column_table -->
                <div class="two_column_table">
                <table>
                        <tr>
                            <td>Address</td>
                            <td><textarea></textarea></td>
                        </tr>
                </table>
                </div> <!-- two_column_table -->
            </div> <!-- clone_table  -->
    </div> <!-- cloned wrapp  -->

    <div class="add_more_field">ADD MORE</div>

and this is my jquery

$('.add_more_field').click(function(){
               var cloned_structure= $('.clone_table').clone();
                  $('.clone_wrapp').append(cloned_structure);
 });

the code is working but it will append along with input content

thanks

Ozzy · Accepted Answer · 2013-08-24 11:25:44Z

If the clone table is your template you could store a copy of it before the click is made so that each copy does not store the text input.

An example:

var clone_table_html = "
            <div class=\"clone_table\">
                <div class=\"two_column_table\">
                    <table>
                        <tr><td>Name of officer-in-charge</td></tr>
                        <tr><td><input type=\"text\"></td></tr>
                        <tr><td>Contact No</td></tr>
                        <tr><td><input type=\"text\"></td></tr>
                    </table>
                </div>  <!-- two_column_table -->
                <div class=\"two_column_table\">
                <table>
                        <tr>
                            <td>Address</td>
                            <td><textarea></textarea></td>
                        </tr>
                </table>
                </div> <!-- two_column_table -->
            </div> <!-- clone_table  -->
";
$('.add_more_field').click(function() {
    $('.clone_wrapp').append(clone_table_html);
});

Or:

var clone_table_template;
$(document).ready(function() {
  clone_table_template = $('.clone_table').clone();
});
$('.add_more_field').click(function() {
  $('.clone_wrapp').append(clone_table_template);
});

Arun P Johny · Accepted Answer · 2013-08-24 11:16:18Z

1

You need to try

$('.add_more_field').click(function(){
    var cloned_structure= $('.clone_table').clone();
    cloned_structure.removeClass('clone_table').find('input:text').val('')
    $('.clone_wrapp').append(cloned_structure);
});

answered Aug 24, 2013 at 11:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Denys Séguret Over a year ago

There's a second problem : it will also clone the already cloned structure. So it will be in powers of two instead of a gentle arithmetic progress of 1.

Collectives™ on Stack Overflow

jquery clone an html structure with out text content

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related