删除克隆行组

Question

我正在尝试删除克隆的行，我将其删除，但它只删除了一行而不是行组。我要做的是让第一个集合无法删除，但一旦克隆行就能删除克隆的行。有人可以帮帮我，我还在学习javascript和jquery。

HTML：

<table align="left" id="show2">
<tr>
    <td align="left" colspan="2" align="center">
        <div class="employmentHistory">
            <table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="left">
                        <table align="left" style="padding-left: 50px;">
                            <tr class="row">
                                <td class="text-fields" align="right">Drug name (tradename)</td>
                                <td class="text-fields" align="left">
                                    <input class="admin-input" type="text" name="drug_name[]" />
                                    <span
                                        style="cursor: pointer; color: #007FC6; font-weight: bold;"
                                        class="deleteThisRow" value="Delete">Delete</span>
                                </td>
                            </tr>
                            <tr class="row2">
                                <td class="text-fields" align="right">Dose value</td>
                                <td class="text-fields" align="left">
                                    <input style="width: 60px;" class="admin-input" type="text" name="dose_value[]" />&nbsp;
                                    <select style="width: 70px;" class="select-input" name="dose[]">
                                        <option selected value="0">Dose</option>
                                        <option value="g">g</option>
                                        <option value="Mg">Mg</option>
                                        <option value="&mu;g">&mu;g</option>
                                        <option value="ml">ml</option>
                                        <option value="Drops">Drops</option>
                                        <option value="Amps">Amps</option>
                                        <option value="Puffs">Puffs</option>
                                    </select>&nbsp;
                                    <select style="width: 95px;" class="select-input" name="frequency[]">
                                        <option selected value="0">Frequency</option>
                                        <option value="Daily">Daily</option>
                                        <option value="Bd">Bd</option>
                                        <option value="Tds">Tds</option>
                                        <option value="Qid">Qid</option>
                                        <option value="4 hourly">4 hourly</option>
                                        <option value="Nocte">Nocte</option>
                                        <option value="Alternate day">Alternate day</option>
                                        <option value="Weekly">Weekly</option>
                                    </select>&nbsp;
                                    <select style="width: 70px;" class="select-input" name="route[]">
                                        <option selected value="0">Route</option>
                                        <option value="PO">PO</option>
                                        <option value="PR">PR</option>
                                        <option value="S/C">S/C</option>
                                        <option value="IM">IM</option>
                                        <option value="IV">IV</option>
                                        <option value="Eyes">Eyes</option>
                                        <option value="Nebs">Nebs</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="row4">
                                <td class="text-fields" align="right"></td>
                                <td class="text-fields" align="left">
                                    <input type="radio" name="chronic_l_duration[]" value="Chronic" />Chronic
                                    <br />
                                    <input type="radio" name="chronic_l_duration[]" value="Limited duration" />Limited duration
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>
<tr>
    <td align="left" colspan="2" style="padding-left: 300px;"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddMore" value="add more">Add another Medication</span>

    </td>
</tr>

使用Javascript：

    $(document).ready(function () {
    var clonedRow = $('.row').clone().html();
    var appendRow = '<tr class = "row">' + clonedRow + '</tr>';

    $('#btnAddMore').click(function () {
        $('.employmentHistoryForm tr:last').after(appendRow);
    });

    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).parent().parent().remove();
    }
});

$(document).ready(function () {

    var clonedRow = $('.row2').clone().html();
    var appendRow = '<tr class = "row2">' + clonedRow + '</tr>';

    $('#btnAddMore').click(function () {
        $('.employmentHistoryForm tr:last').after(appendRow);
    });

    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row2').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).parent().parent().remove();
    }
});

$(document).ready(function () {

    var clonedRow = $('.row4').clone().html();
    var appendRow = '<tr class = "row4">' + clonedRow + '</tr>';
    var counter = 0;
    $('#btnAddMore').click(function () {

        $('.employmentHistoryForm tr:last').after(appendRow);
        counter++;
        $('.employmentHistoryForm tr:last input[type="radio"]').attr('name', 'chronic_l_duration[' + counter + ']');
    });


    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row4').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).parent().parent().remove();
    }
});

我添加了我的代码：http://jsfiddle.net/eBrTa/3/

真的很感激任何帮助。

Answer 1

试试这个： - http://jsfiddle.net/eBrTa/4/

<强> JS： -

$(document).ready(function () {
    var appendRow;

    $('#btnAddMore').click(function () {
        appendRow = $('.myGroup').clone();
        $(appendRow).insertAfter($('.myGroup:last'));
    });

    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).closest(".myGroup").remove();
    }
});

<强> HTML： -

<table align="left" id="show2">
    <tr>
        <td align="left" colspan="2" align="center">
            <div class="employmentHistory">
                <table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="left">
                            <table class="myGroup" align="left" style="padding-left: 50px;">
                                <tr class="row">
                                    <td class="text-fields" align="right">Drug name (tradename)</td>
                                    <td class="text-fields" align="left">
                                        <input class="admin-input" type="text" name="drug_name[]" />
                                        <span
                                            style="cursor: pointer; color: #007FC6; font-weight: bold;"
                                            class="deleteThisRow" value="Delete">Delete</span>
                                    </td>
                                </tr>
                                <tr class="row2">
                                    <td class="text-fields" align="right">Dose value</td>
                                    <td class="text-fields" align="left">
                                        <input style="width: 60px;" class="admin-input" type="text" name="dose_value[]" />&nbsp;
                                        <select style="width: 70px;" class="select-input" name="dose[]">
                                            <option selected value="0">Dose</option>
                                            <option value="g">g</option>
                                            <option value="Mg">Mg</option>
                                            <option value="&mu;g">&mu;g</option>
                                            <option value="ml">ml</option>
                                            <option value="Drops">Drops</option>
                                            <option value="Amps">Amps</option>
                                            <option value="Puffs">Puffs</option>
                                        </select>&nbsp;
                                        <select style="width: 95px;" class="select-input" name="frequency[]">
                                            <option selected value="0">Frequency</option>
                                            <option value="Daily">Daily</option>
                                            <option value="Bd">Bd</option>
                                            <option value="Tds">Tds</option>
                                            <option value="Qid">Qid</option>
                                            <option value="4 hourly">4 hourly</option>
                                            <option value="Nocte">Nocte</option>
                                            <option value="Alternate day">Alternate day</option>
                                            <option value="Weekly">Weekly</option>
                                        </select>&nbsp;
                                        <select style="width: 70px;" class="select-input" name="route[]">
                                            <option selected value="0">Route</option>
                                            <option value="PO">PO</option>
                                            <option value="PR">PR</option>
                                            <option value="S/C">S/C</option>
                                            <option value="IM">IM</option>
                                            <option value="IV">IV</option>
                                            <option value="Eyes">Eyes</option>
                                            <option value="Nebs">Nebs</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr class="row4">
                                    <td class="text-fields" align="right"></td>
                                    <td class="text-fields" align="left">
                                        <input type="radio" name="chronic_l_duration[]" value="Chronic" />Chronic
                                        <br />
                                        <input type="radio" name="chronic_l_duration[]" value="Limited duration" />Limited duration
                                        <br />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="2" style="padding-left: 300px;"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddMore" value="add more">Add another Medication</span>

        </td>
    </tr>
</table>