New Post: Troublesome eventlistener in spservices generated table

Update:

Thought I'd share my finished solution as I found something that works that could perhaps be of use for others as well.

Anyway, this code will query a list for all items created by the current user, then display that in a table with a button for deleting the items. Clicking delete will prompt for confirmation -> delete the item -> remove the row.

Screenshot:


Code:

<script language="javascript" type="text/javascript">
SP.SOD.registerSod('SPServices', "/kurskatalog/_catalogs/masterpage/script/SPServices/jquery.SPServices-2013.01.min.js");
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {console.log("loaded required js");});
SP.SOD.executeFunc('SPServices', null, function () {console.log("loaded SPservices");});


ExecuteOrDelayUntilScriptLoaded(function(){
var thisUserAccount = $().SPServices.SPGetCurrentUser({ //sets the current user, to be used in camlquery for filter
    fieldName: "Title",
    debug: false
    });
    
$().SPServices({
        operation: "GetListItems",
        async: false,
        webURL: "/sites/kursredaktor/",
        listName: "{CCB8060E-5157-49FD-B438-6B45AC4F3013}",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Kurs_x0020_Dato' /><FieldRef Name='Author' /><FieldRef Name='AvmDato' /></ViewFields>",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='Author'></FieldRef><Value Type='Text'>" + thisUserAccount + "</Value></Eq></Where></Query>",
        completefunc: function (xData, Status) {
            var counter = 1;
            
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var sletteid = "sletteid" + counter;
                var title = $(this).attr("ows_Title");
                var cID = $(this).attr("ows_ID");
                var dato = $(this).attr("ows_AvmDato");
                var tdHtml = "<tr id='" + "kursrad" + cID + "'><td>" + $(this).attr("ows_Title") + "<td>" + dato + "</td><td><a id='" + sletteid + "' href='#'><img src='/_layouts/15/images/CNSREJ16.GIF'></a></td></tr>";
                $("#tbody_id").append(tdHtml);
                document.getElementById(sletteid).addEventListener("click", function() {
                    var confirmation = confirm("Are you sure you wish to unregister from \n" + title + "?");
                    if (confirmation == true) {

                    $().SPServices({
                        operation: "UpdateListItems",
                        async: false,
                        webURL: "/sites/kursredaktor/",
                        listName: "{CCB8060E-5157-49FD-B438-6B45AC4F3013}",
                        batchCmd: "Delete",
                        ID: cID,
                        completefunc: function (xData, Status) {
                            $('#kursrad'+cID).remove();             
                        }
                    });
                    }
                    else {
                    console.log("unregister cancelled");
                    }
                }, false);
                counter++;
                });
        }
});

}, "sp.js");

</script>

<table id="minekurs_tabell">
    <thead>
        <tr>
            <th>Class</th>
            <th>Date</th>
            <th>Unregister</th>
        </tr>
    </thead>
    <tbody id="tbody_id">
    </tbody>
</table>

Thanks again Marc for a great tool :)