how to bring the element number from within an append in javascript?

Question

I have a problem that I receive a string information in return of an ajax but I need to delete the specific line, more for this I need to create a counter of the element of the append I’m not able to do that you could help me

follows the html code:

<table class="table table-bordered">
            <thead>
                <tr>
                    <th style="background-color: #606060; color: white; text-align: center;"><b>Image</b></th>
                    <th style="background-color: #606060; color: white; text-align: center;"><b>Image Name</b></th>
                    <th style="background-color: #606060; color: white; text-align: center;"><b>Remover</b></th>
                </tr>
            </thead>
            <tbody id="imagelist" style="text-align: center;">

            </tbody>
        </table>

and the javascript code:

<script>
    var options = {
      shutter_ogg_url: "jpeg_camera/shutter.ogg",
      shutter_mp3_url: "jpeg_camera/shutter.mp3",
      swf_url: "jpeg_camera/jpeg_camera.swf",
    };
    var camera = new JpegCamera("#camera", options);

  $('#take_snapshots').click(function(){
    var snapshot = camera.capture();
    snapshot.show();

    snapshot.upload({api_url: "action.php"}).done(function(response) {
    var id = id++;

    $('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td><input id='foto' style='border: transparent; background-color: transparent; text-align: center; width: 100%;' type='text' value='"+response+"_""'   /></td><td><button style='width: 50%; font-size:30px;' class='btn btn-danger' onclick='apagar();'><i class='glyphicon glyphicon-trash'></i></button></td></tr>");

}).fail(function(response) {
  alert("Upload failed with status " + response);
});
})

function done(){
    $('#snapshots').html("uploaded");
}
</script>

Answer 1

You cannot increment a variable with its own value at the same time you declare it with var. The Result would be NaN, since the variable has no value at that moment.

You need to declare the variable outside the function by assigning it a value (for example, 0), and in the function make the increment.

Analyzing your code, I notice that you want to concatenate the value of id in this value of the string of prepend:

value='"+response+"_"+id+"'

But you’ll also have to concatenate into id="foto", otherwise you will be inserting several elements with the same id="foto", which is incorrect. A id should be unique on the page. Soon you will have to do too:

id='foto"+id+"'

The code will look like this:

var options = {
   shutter_ogg_url: "jpeg_camera/shutter.ogg",
   shutter_mp3_url: "jpeg_camera/shutter.mp3",
   swf_url: "jpeg_camera/jpeg_camera.swf",
};
var camera = new JpegCamera("#camera", options);

var id = 0;
$('#take_snapshots').click(function(){
   var snapshot = camera.capture();
   snapshot.show();

   snapshot.upload({api_url: "action.php"}).done(function(response) {
      id++;

      $('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td><input id='foto"+id+"' style='border: transparent; background-color: transparent; text-align: center; width: 100%;' type='text' value='"+response+"_"+id+"'   /></td><td><button style='width: 50%; font-size:30px;' class='btn btn-danger' onclick='apagar();'><i class='glyphicon glyphicon-trash'></i></button></td></tr>");

   }).fail(function(response) {
      alert("Upload failed with status " + response);
   });
})

function done(){
    $('#snapshots').html("uploaded");
}