我有 3 个文本字段,我想在单击“添加”按钮时使用一个删除图标进行克隆 ...到目前为止,我的代码工作正常。
现在我想在单击删除按钮时删除该特定 div 的最后 3 个文本字段...但是我的代码删除了我表单中所有动态添加的文本字段..
请帮我解决这个问题....
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>');
return false;
});
$('#exercises').on('click', '.remove', function() {
$(this).parents("#exercises").remove();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
</div>
<button id="add_exercise">add exercise</button>
<button class="remove">x</button>
</fieldset>
最佳答案
问题出在您对 .parents('#excercises')
的使用上因为这会选择顶级容器并将其删除。
更好的解决方案是将您附加的所有 3 个输入包装在它们自己的 div 中,然后使用 closest()
删除它,像这样:
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><button type="button" class="remove">x</button></div>');
});
$('#exercises').on('click', '.remove', function() {
$(this).closest(".exercise").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<button type="button" class="remove">x</button>
</div>
<button type="button" id="add_exercise">add exercise</button>
</fieldset>
请注意,我添加了 type="button"
给你的<button>
元素,因为对他们来说不提交任何 parent 是有意义的 form
元素。
关于javascript删除动态添加的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40632396/