Adding a delete button dynamically in JavaScript

Question

I am having a hard time getting my delete button to remove an item dynamically. When I add a new ingredient the button appears but does not have functionality.

$(document).ready(function () {
        getRecipe();
        $(".btn-primary").on("click", addIngredient);
        $(".btn-default").on("click", deleteIngredient);
    });

    var recipe = {
        title: "Pizza",
        servings: 4,
        ingredients: ["cheese", "sauce", "flour", "pepperoni"]
    };

    var button = "<button type=\"button\" class=\"btn btn-default delete btn-xs\"><span class=\"glyphicon glyphicon-minus-sign\"></span></button>";

    function getRecipe() {


        $("#title").append(recipe.title);
        $("#servings").append(recipe.servings);


        for (var i = 0; i < recipe.ingredients.length; i++) {
            $("#ingredients ul").append("<li>" + recipe.ingredients[i] + " " + button + "</li>");

        };
    };

    function addIngredient() {
        var newIngredient = $(".form-control").val();
        $(".form-control").val(newIngredient);
        $("#ingredients ul").append("<li>" + newIngredient + " " + button + "</li>");

    };

    function deleteIngredient() {
        $(this).closest("li").remove();
    };

Try posting your HTML too, so we have a working example to try to debug — CertainPerformance, Apr 12 '18 at 02:45
When you are creating new buttons, they are not magically going to be bound to click handlers. You have to do that again too ``$(".btn-primary").on("click", addIngredient)`` every time you make a new button — Abid Hasan, Apr 12 '18 at 02:45

score 0 · Accepted Answer · answered Apr 12 '18 at 03:36

You are adding onclick handler when the buttons don't exist yet. Call it every time a button is added to it actually get the handler:

function addIngredient() {
    var newIngredient = $(".form-control").val();
    $(".form-control").val(newIngredient);
    $("#ingredients ul").append("<li>" + newIngredient + " " + button + "</li>");

    // after, bind here to register handler to new element
    $(".btn-default").on("click", deleteIngredient);
};

score 0 · Answer 2 · answered Apr 12 '18 at 04:12

I am more of a fan of creating actual Javascript objects than adding HTML text. A good editor will help check the Javascript code and keeps you from having to escape quotes everywhere.

This is mostly plain old JavaScript that should do what you want.

// returns the button that deletes the element provided.
var CreateADeleteObjButton = function(someHtmlElement) {
    var button = document.createElement("button");
    button.type = "button";
    button.className = "btn btn-default delete btn-xs";
    var span = document.createElement("span");
    span.classNAme = "glyphicon glyphicon-minus-sign";
    button.appendChild(span);
    // below is how the button actually deletes something when it is clicked.
    button.onclick = function() {
        // these lines could probably be replaced by the jquery version
        // $(someHtmlElement).remove();
        var parent = someHtmlElement.parent;
        parent.removeChild(someHtmlElement);
    };
    return button;
}

function addIngredient() {
    var newIngredient = $(".form-control").val();
    $(".form-control").val(newIngredient);
    var aLink = document.createElement("li");
    // you can put the button where you like, but following your code
    // I am adding it to the end of the li element.
    alink.appendChild(CreateADeleteObjButton(alink));
    // I assume that #ingredients is an id for the ul, it not, simply add an id to the UL element and put it below.
    document.getElementById("#ingredients").appendChild(alink);
};

Yeah, but that's what template literals are for. Just use slanted single quotes ` ` around your HTML string, and use ${variableOrExpression} and that should work just fine. Believe me, if you have a designer for views and someone else hooking up the AJAX to PHP, you'll be really happy to have an easy to look at template around. — Nerdi.org, Apr 12 '18 at 05:18

Adding a delete button dynamically in JavaScript

2 Answers2