如何从循环阵列 Javascript 中删除和 append？

Question

i have a form like this.

when i change from country, how to remove this form and append again from looping array. if data only one, show Add Form Button and if data > 1, first form always show Add Form Button, for 2nd,3th.. show Delete Form Button.

this is my data: [{"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"}]

This is my script, but not working:

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>' 
            );
}

i want to like this:

Answer 1

May be you did not use consistent id and class for #formadd

I tried to reproduce use only id it worked

 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>