Merge pull request #495 from edx/grady/fix-option-deletion-wrapper

Changed Wrapper Template Logic to not create un-wanted divs

openassessment/xblock/static/js/spec/lms/oa_container.js

@@ -26,7 +26,7 @@ describe("OpenAssessment.Container", function () {
                 templateElement: $("#template").get(0),
                 addButtonElement: $("#add_button").get(0),
                 removeButtonClass: "remove_button",
-                containerItemClass: "test_item",
+                containerItemClass: "container_item",
             }
         );
     };
@@ -40,8 +40,10 @@ describe("OpenAssessment.Container", function () {
         // so we just define the fixture inline.
         setFixtures(
             '<div id="container" />' +
-            '<div id="template" test_id="">' +
-                '<div class="remove_button" />' +
+            '<div id="template">' +
+                '<div class="container_item" test_id="">' +
+                    '<div class="remove_button" />' +
+                '</div>' +
             '</div>' +
             '<div id="add_button" />'
         );
@@ -142,7 +144,7 @@ describe("OpenAssessment.Container", function () {
         // Add an item directly to the container element in the DOM,
         // before initializing the container object.
         $("#container").append(
-            '<div class="test_item" test_id="0">' +
+            '<div class="container_item" test_id="0">' +
                 '<div class="remove_button" />' +
             '<div>'
         );

openassessment/xblock/static/js/src/lms/oa_container.js

@@ -10,11 +10,19 @@ For example, to create a container for an item called "test_item",
 the DOM should look something like:
     <div id="test_container" />
     <div id="test_item_template">
-        <div class="test_item_remove_button">Remove</div>
-        <p>This is the default value for the item.</p>
+        <div class="test_item">
+            <div class="test_item_remove_button">Remove</div>
+            <p>This is the default value for the item.</p>
+        </div>
     </div>
     <div id="test_item_add_button">Add</div>
 
+A critical property of this setup is that the element you want to
+include/duplicate is wrapped inside of a template element which is
+the one that your reference when referring to a template. In the
+above example, $("#test_item_template") would be the appropriate
+reference to the template.
+
 You can then initialize the container:
 >>> var container = $("#test_container").get(0);
 >>> var template = $("#test_item_template").get(0);
@@ -82,7 +90,10 @@ OpenAssessment.Container.prototype = {
         // Copy the template into the container
         // Remove any CSS IDs (since now the element is not unique)
         // and add the item class so we can find it later.
+        // Note that the element we add is the first child of the template element.
+        // For more on the template structure expected, see the class comment
         $(this.templateElement)
+            .children().first()
             .clone()
             .removeAttr('id')
             .toggleClass('is--hidden', false)