使用 id++ 在每个 div 中休息输入

Question

我创建了一个脚本，不幸的是，它可以单独工作，我有一个表单，在单击时会生成一个填充了表单字段的 div，我在每个生成的表单中添加了“重置按钮”，只是每个表单都有一个生成的 id .

如何提供 id + 1（或类似按钮）

// RESET 
$(document).ready(function() {
    $('.variation').find('input:text').val('');
});
//Function
function resetAllValues() {
        $('.variation').find('input:text').val('');
}

第 1 部分：

    <div class="variation section-variation0"><input type="button" value="Delete variation" onclick="resetAllValues();">
<label>Field1:</label> <input type="text" name="variations0"  id="variations0" value=""> 
</div>

第 2 部分

    <div class="variation section-variation1"><input type="button" value="Delete  variation" onclick="resetAllValues();">
<label>Field1:</label> <input type="text" name="variations1"  id="variations1" value=""> 
</div>

等等。 我希望我已经足够清楚了，感谢大家的帮助。

编辑 我有一个代码，用于在每次单击按钮时生成一个新的 div，新的 div 具有“section-variation0”、“section-variation1”等类。

在第一个脚本中，我还为里面的输入生成了一个 RESET 按钮，所以我需要为每个 div 设置一个 RESET，“section-variation0”、“section-variation1”等。

此刻我的按钮重置了所有 div，而不是 section-variation0 或 section-variation1

Answer 1

已修复 - 据我所知，这应该可以解决问题。值得注意的是，我已删除您的内联函数调用并将其移至 jquery。此外，我在您的按钮“variationClass”中添加了一个类，以便每次按下按钮时都可以引用它。单击时，该函数将查找它的同级元素“输入”并用空字符串填充它。但是，我鼓励如果您的 div 最终将具有多个输入元素，则为每个元素添加一个类，然后使用此函数专门更改该输入类的值。我希望这是您正在寻找的解决方案！

$(".variationButton").on("click", function resetAllValues() {
  var inputField = $(this).siblings('input');
  inputField.val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="variation section-variation1"><input type="button" class="variationButton" value="Delete variation">
<label>Field1:</label> <input type="text" name="variations1"  id="variations1" value=""> 
</div>

<div class="variation section-variation0"><input type="button" class="variationButton" value="Delete variation">
<label>Field2:</label> <input type="text" name="variations0"  id="variations0" value=""> 
</div>