<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>
答案 0 :(得分:2)
有几个问题:
(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