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

【问题标题】：How to remove and append from loop array Javascript?如何从循环数组Javascript中删除和追加？
【发布时间】：2020-06-08 16:37:36
【问题描述】：

我有这样的表格。

当我从国家/地区更改时，如何删除此表单并再次从循环数组中追加。如果只有一个数据，则显示添加表单按钮，如果数据 > 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>' 
            );
}

我想要这样：

【问题讨论】：

“我”从何而来？
那里不需要 JSON.parse

标签： javascript html dom dom-manipulation

【解决方案1】：

可能是你没有为#formadd使用一致的id和class

我试图重现使用它的唯一 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>

【讨论】：