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
– Taplar, Commented May 23, 2019 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
– Willie Mangram, Commented May 23, 2019 at 23:31

CertainPerformance · Accepted Answer · 2019-05-23 22:46:33Z

3

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

answered May 23, 2019 at 22:46

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Willie Mangram Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related