添加/删除多个输入字段

时间:2015-10-20 04:33:45

标签: javascript jquery

<div class="form-inline">

  <div class="form-group col-lg-4">

    <label>Select Item:</label>

    <div id="field1">
      <select class="form-control" name="item_1">
        <?php if($item !=0){foreach ($item as $list_item){?>
        <option value="<?php echo $list_item['item'];?>">
          <?php echo $list_item[ 'item'];?>
        </option>

        <?php }}else {?>
        <option value="">No Items Available</option>
        <?php }?>
      </select>

    </div>
  </div>
  <div class="form-group col-lg-2">

    <label>Quantity:</label>
    <div id="field2">
      <input type="number" min="1" class="form-control input-md" name="quantity_1" />
    </div>
  </div>


  <div class="form-group col-lg-3">

    <label>Cost(per piece):</label>
    <div id="field3">
      <input type="number" min="1" class="form-control input-md" name="cost_1" />
    </div>
  </div>
  <div class="form-group col-lg-3" style="margin-top:25px">
    <div id="field4">
      <button id="addmore" onclick="add();" class="btn add-more" type="button">+</button>
    </div>
  </div>
</div>

我有这三个字段(&#39;项目,数量和费用&#39;)并且这三个字段是在点击+按钮时逐步添加的,但我正在删除这些按钮 - 单击。 我只需要在一次点击时添加这三个输入字段,并在一次点击中删除这些字段。这些字段名称也应该递增。

<script>
  function add() {
    i++;
    var div1 = document.createElement('div');
    div1.innerHTML = '<select class="form-control" name="item_' + i + '">  <option value=""></option></select>';
    document.getElementById('field1').appendChild(div1);

    var div2 = document.createElement('div');
    div2.innerHTML = '<input type="number" min="1" class="form-control input-md" name="quantity_' + i + '" />';
    document.getElementById('field2').appendChild(div2);

    var div3 = document.createElement('div');
    div3.innerHTML = '<input type="number" min="1" class="form-control input-md" name="cost_' + i + '" />';
    document.getElementById('field3').appendChild(div3);

    var div4 = document.createElement('div');
    div4.innerHTML = '<button id="remove" onclick="remove_btn(this)" class="btn remove" type="button">-</button>';
    document.getElementById('field4').appendChild(div4);
  }
</script>

2 个答案:

答案 0 :(得分:2)

有几个问题:

  • 避免在您的javascript中添加HTML blob,将HTML放入HTML文件中。
  • 避免使用ID,特别是当它们肯定会重复时。重复的ID是非法的。只能通过查找找到第一个。
  • 避免将文本字符串连接在一起以生成HTML。这样做很容易出错并在代码中放入XSS漏洞。

(function($) {
  "use strict";
  
  var itemTemplate = $('.example-template').detach(),
      editArea = $('.edit-area'),
      itemNumber = 1;
  
  $(document).on('click', '.edit-area .add', function(event) {
    var item = itemTemplate.clone();
    item.find('[name]').attr('name', function() {
      return $(this).attr('name') + '_' + itemNumber;
    });
    ++itemNumber;
    item.appendTo(editArea);
  });
  
  $(document).on('click', '.edit-area .rem', function(event) {
    editArea.children('.example-template').last().remove();
  });
  
  $(document).on('click', '.edit-area .del', function(event) {
    var target = $(event.target),
        row = target.closest('.example-template');
    row.remove();
  });
}(jQuery));
.hidden { display: none; }
.formfield { float: left; }
.example-template { clear: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
  <div class="example-template">
    <div class="formfield"><input placeholder="Name" name="name"></div>
    <div class="formfield"><input placeholder="Addr" name="addr"></div>
    <div class="formfield"><input placeholder="Post" name="post"></div>
    <div class="formfield"><button class="del">-</button></div>
  </div>
</div>

<div class="edit-area">
  <div class="controls">
    <button class="add">+</button>
    <button class="rem">-</button>
  </div>
</div>

首先从隐藏的div元素中抓取行模板,然后将其存储在变量中。每次需要创建一个新行时,它都会克隆模板并对其进行更新。它通过根据需要调整name元素,附加“_”和数字来更新它。一旦定制了该模板的副本,它就会将其附加到编辑区域。

答案 1 :(得分:0)

您可以使用与以下类似的语法删除引用父项的元素:

"display: none;"

与此处描述的类似:http://www.w3schools.com/js/js_htmldom_nodes.asp

另外,请考虑对CSS样式属性进行切换:.text .global _start .equ exit, 1 .equ write, 4 .equ stdout, 1 _start: ldr r5, [sp] @argc value ldr r6, =1 mov r8, #8 @argv address 0: ldr r4, [sp, r8] add r8, r8, #4 ldr r0, = 1 mov r1,r4 bl println mov r0, r4 bl atoi ldr r1, =buffer bl itoa ldr r0, = 1 ldr r1, =buffer bl print2ln add r6, r6, #1 cmp r5,r6 ldr r1, =buffer bl resetbuffer bne 0b mov r0, #0 @ success exit code mov r7, #exit svc 0 @ return to os atoi: push {r4, lr} ldr r2, =0 ldr r3, =0 0: ldrb r1, [r0], #1 cmp r1, #'- beq 2f cmp r1, #'0 blo 1f cmp r1, #'9 bhi 1f sub r1,r1,#'0 ldr r3, =0 mov r3,r2,lsl#3 add r2,r2,r2 add r2,r2,r3 add r2,r2,r1 bal 0b 1: cmp r4, #1 rsbeq r2, r2, #0 mov r0, r2 pop {r4, pc} 2: ldr r4, =1 bal 0b itoa: push {r4, r5, lr} mov r4, r1 ldr r5, =0 push {r5} cmp r0,#0 bge 4f 0: ldr r5, =45 strb r5, [r4] , #1 rsb r0, r0, #0 4: b qr10 3: add r1, r1, #'0 push {r1} cmp r0, #0 bne 4b 1: pop {r5} cmp r5, #0 beq 2f strb r5, [r4] , #1 bal 1b 2: ldr r0, =buffer pop {r4,r5, pc} qr10: mov r3, r0 @ save dividend (n) ldr r1, =0x1999999a @ 2^32/10 sub r0, r0, r0, lsr #30 @ adjust for large dividends umull r2, r0, r1, r0 @ quotient in r0 (q) mov r1, r0, LSL #3 @ 8q add r1, r1, r0, LSL #1 @ 10q sub r1, r3, r1 @ remainder in r1 (r = n - 10q) b 3b # determine string length # parameters # r0: address of null-terminated string # returns # r0: length of string (excluding the null byte) # modifies r0, r1, r2 strlen: @ push {lr} mov r1, r0 @ address of string mov r0, #0 @ length to return 0: ldrb r2, [r1], #1 @ get current char and advance cmp r2, #0 @ are we at the end of the string? addne r0, #1 bne 0b # return @ pop {pc} mov pc, lr @ can do this instead of using the stack # write a null-terminated string followed by a newline # parameters # r0: output file descriptor # r1: address of string to print # modifies r0, r1, r2 println: push {r4, r5, r7, lr} # first get the string length mov r4, r0 @ save the fd mov r5, r1 @ and the string address mov r0, r1 @ the string address bl strlen @ returns the string length in r0 mov r2, r0 @ put length in r2 for the WRITE syscall mov r0, r4 @ restore the fd mov r1, r5 @ and the string address mov r7, #write svc 0 mov r0, r4 @ retrieve the fd adr r1, CR @ get the address of the CR string mov r2, #1 @ one char to write mov r7, #write svc 0 pop {r4, r5, r7, pc} @ restore registers and return to caller # write a null-terminated string followed by 2 newline # parameters # r0: output file descriptor # r1: address of string to print # modifies r0, r1, r2 print2ln: push {r4, r5, r7, lr} # first get the string length mov r4, r0 @ save the fd mov r5, r1 @ and the string address mov r0, r1 @ the string address bl strlen @ returns the string length in r0 mov r2, r0 @ put length in r2 for the WRITE syscall mov r0, r4 @ restore the fd mov r1, r5 @ and the string address mov r7, #write svc 0 mov r0, r4 @ retrieve the fd adr r1, CR @ get the address of the CR string mov r2, #1 @ one char to write mov r7, #write svc 0 mov r0, r4 @ retrieve the fd adr r1, CR @ get the address of the CR string mov r2, #1 @ one char to write mov r7, #write svc 0 pop {r4, r5, r7, pc} @ restore registers and return to caller CR: .byte '\n resetbuffer: push {lr} 0: ldrb r0,[r1] cmp r0, #0 beq 0f strb r0,[r1], #1 b 0b 0: pop {pc} .data buffer: .space 32