Deleting template Id that is cloned

Question

I have an element in the DOM that I use as a template for other forms and ends up being cloned many times. Due to all of the cloning I have several elements that have all of the same Id's. In addition to getting rid of the id attributes on each of the clones, I also want to delete the template because it shows up on the page view but doesn't have any content. My template looks like this

Template Clone

<div id="listBody">
    <div id="template" class="col-md-3 panel ">
        <div class="panel-body">
            <div class="embed-responsive embed-responsive-4by3 text-light">
                <img class="courseImage embed-responsive-item" src="http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png" alt="cover">
                <div class="embed-overlay"></div>
                <div class="embed-bar embed-bar-bottom">
                    <div class="pull-right">
                        <i class="icon-calendar fa-fw"></i> Sep 12, 2015
                    </div>
                    <div>
                        <a href="#" class="visible mr-1x"><i class="visible icon-share fa-fw"></i> Share</a>
                        <a href="#" class="visible"><i class="icon-star visible fa-fw"></i> Favourites</a>
                    </div>
                </div>
            </div><!-- /.embed -->

            <h4 class="templateName"><strong>@*Course name stuff goes in here*@</strong></h4>
            <p class="help-block"><small>by: <a href="#" class="mr-2x templateInstructor">@*Instructor stuff goes in here*@</a> - <span class="ml-2x"><i class="fa fa-tag fa-fw"></i>@*Course TAGS stuff goes in here*@</span></small></p>
            <p class="templateDescription" width="100px" text-overflow="elipses" overflow="hidden" white-space="nowrap" maxlength="200">@*Description stuff goes in here*@</p>
            <a href="#" id="openModalButton" class="showModal btn btn-sm btn-link text-dark"><i class="fa fa-long-arrow-right fa-fw"></i> READ MORE</a>
        </div><!-- /.panel-body -->
    </div><!-- /.panel -->`

What code are you using the clone the template? Or, alternatively, are you copying and pasting the code manually? — jkdev, Dec 17 '15 at 00:17
If you are using jQuery to clone the element you need to use this 'removeAttr("id").' Addictionally if you want an unique ID for your element you can see this post: http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id — Franco, Dec 17 '15 at 00:18

score 0 · Answer 1 · answered Dec 17 '15 at 03:25

A solution to the problem is

var $templateClone = $('#templateParent').find('.template').clone(); $('#coursesArea').append($templateClone);

I hid the (#templateParent) by giving it a "hidden" attribute. (#courseArea) is just a container that I created to put everything inside instead of (#listbody).

Letting everything else run like above allows for multiple objects that do not have the same Id.

Deleting template Id that is cloned

1 Answers1