Home/ Questions/Q 7887185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T05:30:48+00:00

In my jQuery, I have a button that is used to create the remove

  • 0

In my jQuery, I have a button that is used to create the remove button:

$("#add").click(function() {
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn\" value=\"Remove\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });

    fieldWrapper.append(removeButton);
});

However, when I add a remove button manually using the PHP instead of jQuery

<div class='fieldwrapper' id=<? echo "field".$counter ?>
    <input type='button' id='remove' class='btn' value='Remove'>
</div>

I have checked if the fieldwrapper id is not overlapped, so why does it not work? Thank you.

Updated:

$(document).ready(function() {
    $("#config").validate();

    $('#id').click(function() {
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#configField div").length + 1;
        var label = $("<label>Field Name:</label>");
        var labelType = $("<label>Field Type:</label>");
        var labelReq = $("<label>Require:</label>");
        var labelTag = $("<label>Tag:</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"Name" + intId + "\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"Tag" + intId + "\" class=\"required\" />");
        var fReq = $("<select  class=\"required\" name=\"Req" + intId + "\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select  class=\"required\" name=\"Type" + intId + "\"  ><option selected=\"\" value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>");
        var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn remove\" value=\"Remove\" />");

        fieldWrapper.append('<br>');
        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#configField").append(fieldWrapper);
    });

    $('.remove').on('click', function() {
        $(this).parent().remove();
    });
});

PHP:

<div class='fieldwrapper' id=<? echo "field".$counter ?>
    <input type='button' id='remove' class='btn remove' value='Remove'>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re only initiating the remove button functionality after clicking “#add”. By declaring it apart from the internal function, and specifying “delegate(‘click’, ” you will ensure that every .remove element will always delete its parent

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

    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn remove\" value=\"Remove\" />");

    fieldWrapper.append(removeButton);
});


$('.remove').delegate('click', function() {
    $(this).parent().remove();
});
    • 0