CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Leo Chan
Leo Chan

Reputation: 4427

The remove button is not functioning

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>

Upvotes: 0

Views: 155

Answers (1)

Bryan
Bryan

Reputation: 6752

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

Upvotes: 1

Related Questions