Question

我的代码动态创建新字段，但我只能删除第一个创建的字段。调用remove函数的所有其他尝试似乎都失败了，我不知道为什么。

小提琴：https://jsfiddle.net/n2fole00/25xfht1y/

HTML

$json_string = '{"main_object": {"audio":"nl", "title":"Opdracht 1", "vraag":[0, 1, "a"], "antwoord":["yes", "no", 0]}}';

// Add TRUE to force an array, not an object
$array = json_decode($json_string, TRUE);
print_r(array_keys($array['main_object']));

的jQuery

<div class="acal-position-container">
    <div class="acal-card-container">
        <input type="hidden" name="id[]" value="">
        <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;">
            <div style="text-align:right;margin-bottom:10px;">
                <a href="#" class="remove-position-card"><strong>Remove position </strong></a>
            </div>
            <div class="form-group">
                <label for="title[]">Title</label>
                <input type="text" name="title[]" value="" class="form-control" required>
            </div>
        </div>
    </div>
</div>

<input type="button" id="add_position_card" style="margin-top:5px;" value="Add position">

感谢。

Answer 1

当您以动态方式生成HTML时，请使用事件委派。

而不是

$('.remove-position-card').click(function() {

使用

$('.acal-position-container').on('click','.remove-position-card' , function() {

Fiddle

Docs

Answer 2

您必须为动态创建的元素使用事件委派。

$('.acal-position-container').on('click','.remove-position-card' ,function() {
  $(this).closest('.acal-card-container').remove();
  //console.log('called');
});

<强> Working Fiddle

<强> Reference

nearest（）。remove（）工作一次然后停止工作

2 个答案: