如何从循环数组中删除和追加Javascript？

Question

我有一个类似这样的表单，当我改变国家时，如何从循环数组中删除这个表单并再次追加。

如果数据只有一个，显示添加表格按钮，如果数据> 1，第一个表格总是显示添加表格按钮，对于第二个，第三个...显示删除表格按钮。

这是我的数据。[{"gamename": "nama game 1", "gamelink": "link game 1", "image_link": "link gambar 1", "startfrom": "1"},{"gamename": "nama game 2", "gamelink": "link game 2", "image_link": "link gambar 2", "startfrom": "2"}]

这是我的脚本，但不工作。

var elem = document.getElementById('formadd');
elem.parentNode.removeChild(elem);
var json = response.data[0].games;
var array = JSON.parse(json);
for (var i = 0; i < array.length; i++) {
$('.formadd').append(

'<div id="game-form-'+i+'">'+
            '<hr>'+
                '<div class="form-group">'+
                    '<div class="col-md-3">'+

                    '</div>'+
                    '<div class="col-md-6">'+
                        '<label for="gamename" class="control-label col-sm-2">Game Name</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control valid" name="gamename[]" type="text" id="gamename" aria-invalid="false" required>'+
                            '</div>'+

                            '<label for="gamelink" class="control-label col-sm-2">Game Link</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control" name="gamelink[]" type="text" id="gamelink" required>'+
                            '</div>'+

                            '<label for="image_link" class="control-label col-sm-2">Image Link</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control" name="image_link[]" type="text" id="image_link" required>'+
                            '</div>'+

                            '<label for="startfrom" class="control-label col-sm-2">Start From</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control" name="startfrom[]" type="text" id="startfrom" required>'+
                            '</div>'+

                    '</div>'+
                    '<div class="col-md-3"><a href="#" onclick="deleteForm('+i+')" class="btn btn-sm btn-danger pull-left">Delete Form</a></div>'+
                '</div>'+
            '</div>' 
            );
}

我希望像这样:

Answer 1

可能是你没有使用一致的ID和类的 #formadd

我试着重现只用id就可以了。

var json = [{"gamename":"nama game 1","gamelink":"link game 1","image_link":"link gambar 1","startfrom":"1"},{"gamename":"nama game 2","gamelink":"link game 2","image_link":"link gambar 2","startfrom":"2"}]


var elem = document.getElementById('formadd');
//elem.parentNode.removeChild(elem);
var i = 0;
var array = json;
$('#formadd').append(

'<div id="game-form-'+i+'">'+
            '<hr>'+
                '<div class="form-group">'+
                    '<div class="col-md-3">'+

                    '</div>'+
                    '<div class="col-md-6">'+
                        '<label for="gamename" class="control-label col-sm-2">Game Name</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control valid" name="gamename[]" type="text" id="gamename" aria-invalid="false" required>'+
                            '</div>'+

                            '<label for="gamelink" class="control-label col-sm-2">Game Link</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control" name="gamelink[]" type="text" id="gamelink" required>'+
                            '</div>'+

                            '<label for="image_link" class="control-label col-sm-2">Image Link</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control" name="image_link[]" type="text" id="image_link" required>'+
                            '</div>'+

                            '<label for="startfrom" class="control-label col-sm-2">Start From</label>'+
                            '<div class="col-sm-10" style="margin-bottom: 5px">'+
                                '<input class="form-control" name="startfrom[]" type="text" id="startfrom" required>'+
                            '</div>'+

                    '</div>'+
                    '<div class="col-md-3"><a href="#" onclick="deleteForm('+i+')" class="btn btn-sm btn-danger pull-left">Delete Form</a></div>'+
                '</div>'+
            '</div>' 
            );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formadd"></form>