Page Source:
</div>
<div class= "Condition" >
<select class= "Select" >
<c:foreach var= "field" items= "${fields}" >
<option class= "option" id= "${field}" ></option>
</c:forEach>
</select> <input name= "text" type= "text" class= "Searchvalue"/>
<button class= "Add" >+</button>
<button class= "Remove" >-</button>
</div>
The effect is as follows:
Click "+" button, copy a "condition" div, click "-" button to remove the current Div,jquery implementation code:
$ (document). Ready (
function () {
Add options
$ (". Add"). Click (function () {
var Sourcediv = $ (this). parent ();//Gets the node to replicate
var duplicate = Sourcediv.clone (true);
Empty the text
Duplicate.find ("input[name= ' text ']") [0].value = "";
Duplicate.insertafter (SOURCEDIV);
});
Delete button
$ (". Remove"). Click (function () {
var Sourediv = $ (this). parent ();//Gets the node to remove
If only one is not removed
if ($ (". Condition"). Length! = 1) {
Sourediv.remove ();
}
});
});