Fix #10

Author: sutara79

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG: jquery.add-input-area
 
+## v4.10.0
+### New option
+`dont_clone` option is added to fix #8 .  
+See [documentation](https://sutara79.github.io/jquery.add-input-area/#index_12).
+
 ## v4.9.0
 - All comments are written in English. ([isssue #4](https://github.com/sutara79/jquery.add-input-area/issues/4))
 - Move plugin files to `dist/`.

README.md

@@ -16,7 +16,7 @@ https://sutara79.github.io/jquery.add-input-area/
 - [GitHub](https://github.com/sutara79/jquery.add-input-area): Clone or download.
 - [npm](https://www.npmjs.com/package/jquery.add-input-area): `npm i jquery.add-input-area`
 - CDN [(jsDelivr)](https://www.jsdelivr.com/):
-    - [jquery.add-input-area.min.js (v4.10.0)](https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.10.0/dist/jquery.add-input-area.min.js)
+    - [jquery.add-input-area.min.js (v4.10.1)](https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.10.1/dist/jquery.add-input-area.min.js)
 
 
 ## Usage

dist/jquery.add-input-area.min.js

@@ -1,7 +1,7 @@
 {
   "name": "jquery.add-input-area",
   "description": "jQuery plugin to add or delete form fields.",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "license": "MIT",
   "author": "Yuusaku Miyazaki <toumin.m7@gmail.com>",
   "homepage": "https://github.com/sutara79/jquery.add-input-area",

package.json

@@ -1,6 +1,6 @@
 /**
  * @file jquery.add-input-area
- * @version 4.10.0
+ * @version 4.10.1
  * @author Yuusaku Miyazaki <toumin.m7@gmail.com>
  * @license MIT
  */

src/index.js

@@ -115,7 +115,7 @@ export default {
     ev.preventDefault();
 
     // Delete the wrapper
-    var idx = $(this.elem).find(this.option.btn_del).index(ev.target);
+    var idx = $(this.elem).find(this.option.btn_del).index(ev.currentTarget);
     $(this.elem).find(this.option.area_var).eq(idx).remove();
 
     // If the wrapper is single, del-button is not displayed.

src/methods.js

@@ -29,6 +29,7 @@
 <script src="jQuery.addInputArea/renumberFieldEach.js"></script>
 <script src="integration/test.js"></script>
 <script src="integration/dont_clone.js"></script>
+<script src="integration/current-target.js"></script>
 
 <script>
 mocha.run(function (err) {

test/unit/index.html

@@ -0,0 +1,42 @@
+/**
+ * @file Integration Testing
+ * @see https://github.com/sutara79/jquery.add-input-area/issues/10
+ */
+describe('event.currentTarget', function () {
+  var target;
+  beforeEach(async function () {
+    target = $(`
+      <ol id="list">
+        <li class="list_var">
+          <input type="text" size="30" name="list_0" id="list_0">
+          <button type="button" class="list_del">
+            <span class="del-child">Delete</span>
+          </button>
+        </li>
+      </ol>
+      <input type="button" value="Add" class="list_add">
+    `).appendTo('body');
+    await target.addInputArea();
+    await $('#list_0').val('a');
+    await $('.list_add').trigger('click');
+    await $('#list_1').val('b');
+    await $('.list_add').trigger('click');
+    await $('#list_2').val('c');
+  });
+
+  afterEach(function () {
+    target.remove();
+  });
+
+  it('should remove certain element when clicking button', async function () {
+    await $('.list_var').eq(0).find('.list_del').trigger('click');
+    assert.equal($('.list_var').length, 2);
+    assert.equal($('#list_0').val(), 'b');
+  });
+
+  it('should remove certain element when clicking span', async function () {
+    await $('.list_var').eq(0).find('.del-child').trigger('click');
+    assert.equal($('.list_var').length, 2);
+    assert.equal($('#list_0').val(), 'b');
+  });
+});

test/unit/integration/current-target.js

@@ -5,15 +5,15 @@ describe('Option: dont_clone', function () {
   var target;
   beforeEach(function () {
     target = $(`
-  <ol id="list">
-    <li class="list_var">
-      <div>This will be cloned.</div>
-      <div class="dont_clone">This will NOT be cloned.</div>
-      <input type="text" size="30" name="list_0" id="list_0">
-      <button type="button" class="list_del">Delete</button>
-    </li>
-  </ol>
-  <input type="button" value="Add" class="list_add">
+      <ol id="list">
+        <li class="list_var">
+          <div>This will be cloned.</div>
+          <div class="dont_clone">This will NOT be cloned.</div>
+          <input type="text" size="30" name="list_0" id="list_0">
+          <button type="button" class="list_del">Delete</button>
+        </li>
+      </ol>
+      <input type="button" value="Add" class="list_add">
     `).appendTo('body');
   });
 
@@ -24,12 +24,12 @@ describe('Option: dont_clone', function () {
   it('should clone', async function () {
     await target.addInputArea(); // The dont_clone option is not set.
     await $('.list_add').trigger('click');
-    await assert.equal($('.list_var').eq(1).find('.dont_clone').length, 1);
+    assert.equal($('.list_var').eq(1).find('.dont_clone').length, 1);
   });
 
   it('should not clone', async function () {
     await target.addInputArea({dont_clone: '.dont_clone'});
     await $('.list_add').trigger('click');
-    await assert.equal($('.list_var').eq(1).find('.dont_clone').length, 0);
+    assert.equal($('.list_var').eq(1).find('.dont_clone').length, 0);
   });
 });