How to remove and append from loop array Javascript?

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:

Where does "i" come from?

sathish1409
– sathish1409

2020-06-08 05:00:06 +00:00
Commented Jun 8, 2020 at 5:00 — sathish1409
– sathish1409, Commented Jun 8, 2020 at 5:00
You don't need JSON.parse there

sathish1409
– sathish1409

2020-06-08 05:01:39 +00:00
Commented Jun 8, 2020 at 5:01 — sathish1409
– sathish1409, Commented Jun 8, 2020 at 5:01

Hien Nguyen · Accepted Answer · 2020-06-08 05:11:20Z

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>

Collectives™ on Stack Overflow

How to remove and append from loop array Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related