Question

我有动态添加/删除输入的功能。添加工作正常，但删除不希望工作。我找到了此功能的 jQuery 实现，并尝试将其转换为纯 JS。这就是删除的实现方式（我在 jQuery 上对其进行了测试，并且可以正常工作）。

$(document).on('click', '#removeRow', function () {
   $(this).closest('#inputFormRow').remove();
});

var i = '2';
document.getElementById('addRow').addEventListener('click', function () {
        var html = '';
        html += '<tr id="inputFormRow">';
          html += '<td id="prevdel">'+i+'</td>';
          html += '<td>';
            html += '<input type="text" name="position_name[]" placeholder="Enter new position">';
          html += '</td>';
          html += '<td>';
            html += '<div class="input-group-append ml-3">';
              html += '<button id="removeRow" type="button" class="btn btn-danger">Delete</button>';
            html += '</div>';
          html += '</td>';
        html += '</tr>';
        //
        i++;

        // document.getElementById('newRow').append(html);
        document.getElementById('newRow').insertAdjacentHTML('beforebegin', html);
    });

  // remove row
  document.getElementById('removeRow').addEventListener('click', function (e){
    e.preventDefault();
    document.getElementById('prevdel').previousSibling.remove();
  });
  //

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
          <table class="table table-success table-striped w-75 text-center">
          <tbody>
            <tr>
            <div id="inputFormRow">
              <td>1
              </td>
                <td>
                  <input type="text" name="position_name[]" value="Some data">
                </td>
                <td>
                  <div class="input-group-append ml-3">
                      <button id="removeRow" type="button" class="btn btn-danger">Delete</button>
                  </div>
                </td>
              </div>
            </tr>
             <tr id="newRow"></tr>
             <tr>
               <td colspan="3">
                 <button id="addRow" type="button" class="btn btn-info">Add field</button>
               </td>
             </tr>

            </tbody>
          </table>
        </form>

Answer 1

jQuery 版本使用事件委托来处理运行时不存在的元素

您可以通过将事件侦听器添加到表并检查 event target

document.querySelector('.table').addEventListener('click', function (e){
   if(e.target.matches('button.removeRow')){
      e.target.closest('tr').remove()
   }      
});

工作版本 - 注意我将两个删除按钮 id 更改为 class

var i = '2';
document.getElementById('addRow').addEventListener('click', function () {
        var html = '';
        html += '<tr id="inputFormRow">';
          html += '<td id="prevdel">'+i+'</td>';
          html += '<td>';
            html += '<input type="text" name="position_name[]" placeholder="Enter new position">';
          html += '</td>';
          html += '<td>';
            html += '<div class="input-group-append ml-3">';
              html += '<button  type="button" class="removeRow btn btn-danger">Delete</button>';
            html += '</div>';
          html += '</td>';
        html += '</tr>';
        //
        i++;

        // document.getElementById('newRow').append(html);
        document.getElementById('newRow').insertAdjacentHTML('beforebegin', html);
    });

  // remove row
  document.querySelector('.table').addEventListener('click', function (e){
     if(e.target.matches('button.removeRow')){
        e.target.closest('tr').remove()
     }
      
  });
  //

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
          <table class="table table-success table-striped w-75 text-center">
          <tbody>
            <tr>
            <div id="inputFormRow">
              <td>1
              </td>
                <td>
                  <input type="text" name="position_name[]" value="Some data">
                </td>
                <td>
                  <div class="input-group-append ml-3">
                      <button  type="button" class="removeRow btn btn-danger">Delete</button>
                  </div>
                </td>
              </div>
            </tr>
             <tr id="newRow"></tr>
             <tr>
               <td colspan="3">
                 <button id="addRow" type="button" class="btn btn-info">Add field</button>
               </td>
             </tr>

            </tbody>
          </table>
        </form>

无法删除表的 tr 元素。 JS

1 个答案: