Trying to create delete button dynamically and call delete function in javascript

Question

The idea for this page is to load the 'skills' from my java application and dynamically create a Delete button that allows me to delete those 'skills' from the application.

Error received when attempting to click the button to delete a skill.

manageTech:1 Uncaught ReferenceError: deleteMe is not defined at HTMLButtonElement.onclick (manageTech:1)

js file:

$( document ).ready( () => {

    var url = window.location;

    // GET REQUEST
    $("#btnGetFiles").click( (event) => {
        event.preventDefault();
        ajaxGet();
    });

function deleteMe(id) {
    window.alert("Button clicked, id " + id + ", text");
    $.ajax({
        url: '/api/technologyList' + '/' + id,
        type: 'DELETE',
        success: function() {
           ajaxGet();
       }
    })
}

// DO GET
function ajaxGet() {
$.ajax({
    type: 'GET',
    url: '/api/technologyList',
    success: function (skills) {
        $.each(skills, function (i, skill) {
            $('#listFiles').append('<tr>' + '<td>' + '<button ' +
                'type="submit" ' +
                'data-id="' + skill.id + '" ' +
                'onclick="deleteMe('+skill.id+')"' +
                'name="deletebtn">' +
                'Delete' +
                '</button>' + '</td>' +
                '<td>' + skill.id + '</td>' +
                '<td>' + skill.logo + '</td>' +
                '<td>' + skill.techName + '</td></tr>')
        })



    }
    });
    }
});

In addition to the answer below, consider using `$.map()` to create an array of html strings, and then give that array to `.append()` so that all the elements are appended to the DOM in one operation, decreasing the number of times you are touching the DOM for performance gains. — Taplar, May 23 '19 at 22:59
I appreciate your comment Taplar, I'm pretty new to Javascript and I'm learning based on using and without any actual studies on the subject matter. I've seen DOM tossed around quite a bit but don't have a solid understanding, this page is mainly for managing my portfolio website through the REST api endpoints I've made but if I find in the future that I'm diving more and more into javascript then I'll definitely consider your suggestion! — Willie Mangram, May 23 '19 at 23:31

score 3 · Accepted Answer · answered May 23 '19 at 22:46

Your deleteMe is not on the top level - it's inside your $( document ).ready( () => {, so it's not a global variable, so the inline handler onclick="deleteMe('+skill.id+')" fails. (Inline handlers can only reference global variables on the top level.)

Although you could fix it by moving deleteMe outside, inline handlers are bad practice; consider attaching an event listener properly using Javascript instead. Remove the inline handler, and use event delegation:

$('#listFiles').on('click', 'button[name="deletebtn"]', function() {
  deleteMe(this.dataset.id);
});

Thank you! I was able to get it working, instead of deleteMe(this.dataset.id) in your example, I used deleteMe(event.target.dataset.id) which was able to find the correct id for the skill. — Willie Mangram, May 23 '19 at 23:11

Trying to create delete button dynamically and call delete function in javascript

1 Answers1