I have a script that will append to two places on my web application. One is a list item and the other is a hidden field on a HTML form (which I process the data in a PHP service file).

However, I want that if a user clicks the 'x' icon that all the elements are removed that have the same ID.

I have a good idea how to do this but my script below doesn't even log the ID. The .control block is giving me the issue. The #add code block successfully appends the HTML.

Am I missing something obvious?

$("#add").click(function() {

    // RENDER LIST
    var playerList = ""; //
    playerList += "<li class='selection'>" + $("#player").val() + "<i class='fa fa-close control' data-id='" + $("#playerGUID").val() + "'> </i>" + "</li>";

    $(playerList).appendTo("#playerList");

    // ADD GUID TO SUBMISSION VALUES
    var playerHTML = "";
    playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />";

    $(playerHTML).appendTo("#selected-players");

    // CLEAR INPUT FIELD
    $("#player").val('');
});

$(".control").click(function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);

    // REMOVE WILL COME HERE
});

I have a script that will append to two places on my web application. One is a list item and the other is a hidden field on a HTML form (which I process the data in a PHP service file).

However, I want that if a user clicks the 'x' icon that all the elements are removed that have the same ID.

I have a good idea how to do this but my script below doesn't even log the ID. The .control block is giving me the issue. The #add code block successfully appends the HTML.

Am I missing something obvious?

$("#add").click(function() {

    // RENDER LIST
    var playerList = ""; //
    playerList += "<li class='selection'>" + $("#player").val() + "<i class='fa fa-close control' data-id='" + $("#playerGUID").val() + "'> </i>" + "</li>";

    $(playerList).appendTo("#playerList");

    // ADD GUID TO SUBMISSION VALUES
    var playerHTML = "";
    playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />";

    $(playerHTML).appendTo("#selected-players");

    // CLEAR INPUT FIELD
    $("#player").val('');
});

$(".control").click(function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);

    // REMOVE WILL COME HERE
});

• javascript
• jquery
• html

• 1 all the elements are removed that have the same ID?? ID have to be unique per page... – Guruprasad J Rao Commented May 16, 2016 at 14:09
• If you're using bad/broken code on purpose, you can't expect it to work properly. As you can see here, in case of more than one element having the same ID, jQuery will just take the first. – user447356 Commented May 16, 2016 at 14:14
• Could you please post some of your HTML code? – Jose Hermosilla Rodrigo Commented May 16, 2016 at 14:14
• 1 @GuruprasadRao I had the exact same reaction reading this sentence. As in "Don't tell me you did what I think you did..." – zoubida13 Commented May 16, 2016 at 14:15
• @GuruprasadRao ID in this case is just a HTML5 data attribute. They are fine to have the same. – WebDevDanno Commented May 16, 2016 at 14:16

3 Answers 3

$(".control") doesn't exist at the time you bind the click event. You will need to delegate the event like so:

$(document).on("click", ".control", function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);
   // REMOVE WILL COME HERE
});

What happens here is that jQuery will bind a listener on the document (which always exists) rather than the .control which will not exist until you create it via a click to the #add. That way if can catch events on elements with class control even if the elements themselves were added later.

Check jQuery.on under Direct and delegated events for more details.

Note: Instead of using $(document) you can bind the event on any element which will be a parent of .control and is available when you bind the event (e.g. body). Ideally you'd want to bind it to the closest parent element which is present when the document is loaded.

Try .on bind event instead of .click

$(".control").on("click",function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);

    // REMOVE WILL COME HERE
});

The click() binding you're using is called a direct binding which will only attach the handler to elements that already exists. It won't get bound to elements created later. To do that, You'll have to create a "delegated" binding by using on() method.

Eg.

    <html>
    <head>
    <script src="http://code.jquery./jquery-latest.min.js"></script>

    </head>
    <body>

        <div id="playerList">playerList</div>

        <div id="selected-players">selected-players</div>

        <a href="#" id="add">Add</a>

    <script>

        $(document).ready(function(){

          $("#add").click(function() {

            // RENDER LIST
            var playerList = ""; //
            playerList += "<li class='selection'>Dynamic LI " + $("#player").val() + "<i class='fa fa-close control' data-id='sample-data-id " + $("#playerGUID").val() + "'> <b>iVal-Click Here</b> </i>" + "</li>";

            $(playerList).appendTo("#playerList");

            // ADD GUID TO SUBMISSION VALUES
            var playerHTML = "";
            playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />";

            $(playerHTML).appendTo("#selected-players");

            // CLEAR INPUT FIELD
            $("#player").val('');
        });

        $("#playerList").on("click", ".control", function() {
            $targetID = $(this).attr('data-id');
            console.log("Selected ID:" + $targetID);

            // REMOVE WILL COME HERE
        });

        });

    </script>   

    </body>
    </html>