Issue with rendering javascript with javascript

Question

Basically I've had a headache trying to solve this, I want to create a few controls with JS (using jquery) but I also want to add a remove button for them, my attempt is below: html:

                    <div class=col-lg-6>
                        <h1>Pieces</h1>
                        <form method=post>
                        <div id=pieces></div>

                        <button class='btn btn-success' id=addpiece>Add Piece</button>
                        <button class='btn btn-primary'>Submit</button>
                        </form>
                    </div>

And the JS:

                $(document).ready(function(){
                 var counter = 1;
                    $("#addpiece").click(function (e) {

                        $("#pieces").append('<label>Piece ' + counter + ': </label><br>' +
                              '<p id=added'+counter+'><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + 
                              '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + 
                              counter + '" required>cm x ' +
                              '<input min=0 step=0.1 style=width:70px; type="number" name="height' + 
                              counter + '" required>cm x ' +
                              '<input min=0 step=0.1 style=width:70px; type="number" name="length' + 
                              counter + '" required>cm</div></div>' +
                              '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + 
                              '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + 
                              counter + '" required>KG<br>' +
                              '<input type=hidden name=counter value=' + 
                              counter + '><button class="btn btn-danger" id="remove' + counter + '">X</button>\<script type="text\/javascript"\>' +
                              '$("#remove' + counter + '").click(function (e) { $( "#added'+counter+'" ).remove(); return false; }  \<\/script\>' +
                              '</div></div></p><br>');
                        counter++;
                        return false;
                     });


                  });

Check out my fiddle for clearer view: http://jsfiddle.net/c1Lv7ska/

the X on the jsfiddle isn't deleting the
– Javi Qualms Pdog Feb 12 '15 at 09:45 — Javi Qualms Pdog, Feb 12 '15 at 09:45

score 0 · Accepted Answer · edited May 23 '17 at 12:12

Since you are dynamically creating the remove button, use event delegation to register the remove handler.

Also it is better if you have a container element which will contain all the elements for a piece, like the one I added(<div class="piece">) to wrap all the elements.

$(document).ready(function () {
    var counter = 1;
    $("#addpiece").click(function (e) {
        $("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
        counter++;
        return false;
    });
    $("#pieces").on('click', '.remove', function(){
        $(this).closest('.piece').remove()
    })

});

Issue with rendering javascript with javascript

1 Answers1