如何删除复选框上的克隆行

Question

我有一个像这样构造的表行

 <tr class="tr_clone">

    <td>
        @part.PartIDLink
    </td>
    <td>
        @Html.DisplayFor(x => x.Parts[i].PartName)
        @Html.HiddenFor(x => x.Parts[i].PartName)
    </td>
    <td style="font-weight:bold">
        @Html.DisplayFor(x => x.Parts[i].QtyInItem)
        @Html.HiddenFor(x => x.Parts[i].QtyInItem)
    </td>
    <td>
        <input type="checkbox" id="all@(part.ID)" class="part-class" data-partId="@(part.ID)" checked>
    </td>
    <td>
        <div id="AllTxt">
             @Html.DisplayFor(x => x.Parts[i].QtyInItem)
        </div>
        <div id="editQty">
             @Html.EditorFor(x => x.Parts[i].Qty)
        </div>
    </td>
    @foreach (var actionType in partActionTypes)
    {
        <td>
            @Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType)
        </td>
    }
 </tr>

这是我的剧本

       $(document).ready(function () {
            $('.tr_clone input.part-class').change(function () {

                let Id = $(this).attr('id');
                let partId = $(this).attr('data-partId');

                if ($(Id).is(":checked")) {
                // remove cloned row

                $("#AllTxt").hide();
                $("#editQty").show();              
                }
                else {
                var $tr = $(this).closest('.tr_clone');
                var $clone = $tr.clone();
                $clone.find('td');
                $tr.after($clone);
                $($clone).find(".part-class").hide();
                $clone.find('input[type="radio"]').attr("name", function (el) { return el.name + 'clone' });    
               
                $("#AllTxt").show();
                $("#editQty").hide();
                }
            });
        });

我有几个问题，

1. 是否有比我目前执行的更好的方法在DisplayFor和EditorFor之间进行切换？
2. 如果重新选中此复选框，我希望删除克隆的行。最好的方法是什么？