JavaScript删除动态添加分区

Question

我有3个textfield，我想克隆一个删除图标添加按钮点击...到这我的代码工作正常。

现在我想删除就删除按钮，点击该特定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>

Answer 1

问题是与您使用的.parents('#excercises')因为这样选择顶层容器，并删除它。

一个更好的解决办法是将包装所有你在自己的div追加3个输入，然后删除使用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>元素，因为它们对于他们不提交任何父母form元素是有意义的。