javascript 关闭按钮问题 |我该如何解决？

Question

此处 java脚本用于创建多个 table 字段通过单击加号按钮多次打开它工作正常现在我的问题是当我单击关闭时按钮然后它将被删除但不是，当我在 java 脚本中使用时 $(this).parent().parent().remove 然后它不是当我使用 $('tbody').remove() 或 $('tbody tr').remove() 或 $('tbody tr td').remove() 时工作然后整个 table 及其字段被删除....请让

我认识任何人..我该如何解决？？？

$('#addRow').on('click', function() {
    addRow();
});

function addRow() {

    var td1 = '<td>' +
        '<label class="control-label">Class / Field :</label>' +
        '</td>' +
        '<td>' +
        '<input class="form-control" id="idSource" type="text" name="class[]" />' +
        '</td>' +
        '<td>' +
        '<label class="control-label">University :</label>' +
        '</td>' +
        '<td>' +
        '<input class="form-control" id="idDestination" type="text" name="university[]" />' +
        '</td>';
    var td2 = '<td>' +
        '<label class="control-label">Institute / Collage Name :</label>' +
        '</td>' +
        '<td>' +
        '<input class="form-control" id="idSource" type="text" name="institute_name[]" />' +
        '</td>' +
        '<td>' +
        '<label class="control-label"> Percentage / GPA / CGPA : </label>' +
        '</td>' +
        '<td>' +
        '<input class="form-control" id="idDestination" type="text" placeholder="00.00" name="per[]"/>' +
        '</td>';
    var td3 = '<td>' +
        '<label class="control-label">Start Date :</label>' +
        '</td>' +
        '<td>' +
        '<input class="form-control" id="idSource" type="date" name="sdate[]" />' +
        '</td>' +
        '<td>' +
        '<label class="control-label">End Date:</label>' +
        '</td>' +
        '<td>' +
        '<input class="form-control" id="idDestination" type="date" name="edate[]" />' +
        '</td>';
    var td4 = '<td><a class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a></td>';

    var td5 = '<td>' +
        '<b>&nbsp;</a>' +
        '</td>' +
        ' <td>' +
        '<b>&nbsp;</b>' +
        '</td>' +
        ' <td>' +
        '<b>&nbsp;</b>' +
        '</td>' +
        ' <td style="text-align: right;">' +
        '<b><a class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a></b>' +
        '</td>';

    $('tbody').append('<tr>' + td1 + '</tr>' + '<tr>' + td2 + '</tr>' + '<tr>' + td3 + '</tr>' + '<tr>' + td5 + '</tr>');
};

$('tbody').on('click', '#remove', function() {
    var last = $('tbody').length;
    if (last == 1) {
        alert('You Can Not Remove Last');
    } else {
        if (confirm("Do you want to delete this row?")) {
            $(this).parent().parent().remove();
            $('tbody').remove();
        }
    }
});

Blade 文件

 <div class="col-md-12 field-wrapper" id="wrapper">
                        <div class="panel panel-footer">
                        <form id="allInputsFormValidation" class="form-horizontal" action="{{route('create_education')}}" method="post">
                                @csrf
                            <table class="table table-striped col-md-12">
                                <thead>
                                    <tr>

                                        <td><b>
                                            <a class="btn btn-success" id="addRow"><i class="fa fa-plus"></i></a>
                                        </td>
                                        <td><b>&nbsp;</b></td>
                                        <td><b>&nbsp;</b></td>
                                        <td><b>

                                        </td>

                                    </tr>
                                </thead>
                                <div class="form-group column-sizing">
                                <tbody id="tbody">
                                    <tr>
                                        <td>
                                            <label class="control-label">Class / Field :</label>
                                        </td>
                                        <td>
                                            <input class="form-control" type="text" name="class[]" />

                                        </td>
                                        <td>
                                            <label class="control-label">University :</label>
                                        </td>
                                        <td>
                                            <input class="form-control" type="text" name="university[]" />
                                        </td>                               
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="control-label">Institute / Collage Name :</label>
                                        </td>
                                        <td>
                                            <input class="form-control" type="text" name="institute_name[]" />
                                        </td>
                                        <td>
                                            <label class="control-label">Percentage / GPA / CGPA / SPI :</label>
                                        </td>
                                        <td>
                                            <input class="form-control" type="text" name="per[]" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="control-label">Start Date :</label>
                                        </td>
                                        <td>
                                            <input class="form-control" type="date" name="sdate[]" />
                                        </td>
                                        <td>
                                            <label class="control-label">End Date :</label>
                                        </td>
                                        <td>
                                            <input class="form-control" type="date" name="edate[]" />
                                        </td>

                                    </tr>
                                     <tr>

                                         <td><b>&nbsp;</b></td>
                                        <td><b>&nbsp;</b></td>
                                        <td><b>&nbsp;</b></td>
                                        <td style="text-align: right;"><b>
                                            <a class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a></b>
                                        </td>

                                    </tr>

                                </tbody>
                                </div>
                            </table>  
                            <div class="card-footer" style="margin-left: 90%">
                                <button type="submit" class="btn btn-info btn-fill">Submit</button>
                            </div>  
                        </form>
                        </div>
                     </div>

Answer 1

这是新方法，希望它能满足您的需求。

按下面的"Run code snippet"按钮

$('#data').on('click', '.remove-record', ({currentTarget: elRemove}) => {
  var isLastRecord = $('.data-record').length === 1;
  if (isLastRecord) {
    alert('You Can Not Remove Last');
  } else if (confirm('Do you want to delete this row?')) {
    $(elRemove).closest('.data-record').remove();
  }
});

$('#add-new-record').on('click', () => $('#data').append(`
  <table class="data-record table table-striped col-md-12">
    <tr>
      <td><label class="control-label">Class / Field :</label></td>
      <td><input class="form-control" id="idSource" type="text" name="class[]" /></td>
      <td><label class="control-label">University :</label></td>
      <td><input class="form-control" id="idDestination" type="text" name="university[]" /></td>
    </tr>
    <tr>
      <td><label class="control-label">Institute / Collage Name :</label></td>
      <td><input class="form-control" id="idSource" type="text" name="institute_name[]" /></td>
      <td><label class="control-label"> Percentage / GPA / CGPA : </label></td>
      <td><input class="form-control" id="idDestination" type="text" placeholder="00.00" name="per[]" /></td>
    </tr>
    <tr>
      <td><label class="control-label">Start Date :</label></td>
      <td><input class="form-control" id="idSource" type="date" name="sdate[]" /></td>
      <td><label class="control-label">End Date:</label></td>
      <td><input class="form-control" id="idDestination" type="date" name="edate[]" /></td>
    </tr>
    <tr>
      <td><b>&nbsp;</a></td>
      <td><b>&nbsp;</b></td>
      <td><b>&nbsp;</b></td>
      <td style="text-align: right;"><b><a class="remove-record btn btn-danger"><i class="fa fa-remove"></i></a></b>
      </td>
    </tr>
  </table>
`));

<!-- required modules -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- add new row button -->
<div>
  <button class="btn btn-success" id="add-new-record">
    <i class="fa fa-plus"></i>
  </button>
</div>

<!-- here goes data -->
<div id="data"></div>

想法和建议

如您所见，您现在没有初始空记录（行）- 我认为这对 DRY 和 KISS 原则更好。

DRY 代表 "Don't Repeat Yourself"
KISS for "Keep It Super Simple" or "Keep It Simple Stupid" - 你可以选择你最喜欢的）

javascript 关闭按钮问题 |我该如何解决？

javascript problem on the close button | how i can solve?

javascript

jquery

laravel-6

这是新方法，希望它能满足您的需求。

按下面的"Run code snippet"按钮

想法和建议