Javascript 复杂的附加和更新 DOM，因此可以使用 remove(）; 将其删除

Javascript complicated append and updating DOM so it able to be removed with remove();

本文关键字：remove 可以使 删除 复杂 DOM 更新 Javascript      更新时间：2023-09-26

我有一个小问题，我正在尝试删除附加的表行。每当用户单击 .removeRow 时，都会激活函数 removeCustomSetting（）

点击该按钮后，表格行不会被删除。我认为这是因为追加函数不会更新 DOM。

我尝试了很多事情，例如更新 DOM 元素，但没有成功。

如果有人知道如何解决这个问题，我真的会很感激:)

我们的表格行

<tbody id="customSettingsTableContent">
    <tr id="settingRow_265"><td>ertert</td><td>17-03-2016&nbsp;19:19:59</td><td><a style="cursor:pointer;" class="removeRow" onclick="removeCustomSetting('265','p3rstuxgq7');"><li class="fa fa-close"></li></a></td></tr>
</tbody>

在这里，我们按 id 删除行（就像表中的这个settingRow_265 )一样。每个 ID 在表中都是唯一的，因为它是从数据库中的自动增量中提取的。

   function removeCustomSetting(settingId, inputId) {
    $.post("", { action: "removeCustomSetting", settingId: settingId, inputId: inputId },
        function(data,status){ 
            if(status=='success') { 
                $("#settingRow_" + settingId + "").remove(); 
                    var countCustomSettingRow = $('#customSettingsTable tr').length-1; 
                        if(countCustomSettingRow<1) { $("#customSettingsTableContent").html("<tr><td>No custom settings found...</td><td></td><td></td></tr>"); }
            } 
        }                                       
        );
    }

在这里，我们在提交并获取 JSON 数据后将行添加到表中。

      function addCustomSetting(inputId) {
            customSettingName = $('input[name=customSettingName]').val(); 
                if(!customSettingName) { alert("Can't be empty"); } else {
                    alert("OK "+ customSettingName +"");
                        $.post("", { action: "addCustomSetting", customSettingName: customSettingName, inputId: inputId },
                        function(data,status){ 
                            var return_addCustomSettingResponse = jQuery.parseJSON(data);
                        alert("success " + data + "");
                        $("#customSettingsTableContent").html("<tr><td>" + return_addCustomSettingResponse.name + "</td><td>" + return_addCustomSettingResponse.date + " " + return_addCustomSettingResponse.time + "</td><td>" + return_addCustomSettingResponse.inputId + "<a style='"cursor:pointer;'" onclick='"removeCustomSetting('" + return_addCustomSettingResponse.id + "','" + return_addCustomSettingResponse.inputId + "');'"><li class='"fa fa-close'"></li></a></td></tr>");

                   }                                            
               );
           }
       }

您忘记以示例 html 的方式为表行提供 ID。

$("#customSettingsTableContent").html("<tr><td>" + return_a

添加 id 后，它应该再次开始工作。但是，如果您只是停止使用 onclick 属性，那会更容易。为锚标记提供一类 delete-custom-setting ，然后使用它（仅一次，不在事件处理程序或函数中。此外，删除 onclick 属性。

$("#customSettingsTableContent").on('click', '.delete-custom-setting', function () {
    var thisRow = $(this).closest('tr');
    var siblings = thisRow.siblings();
    thisRow.remove();
    if (siblings.length === 0) {
        $("#customSettingsTableContent").html(...no more content etc...);
    }
});

另请注意，您可能希望使用 .append，否则此部分中的行永远不会超过一行。

试试这个，

function addCustomSetting() {
  $('.noRecords').remove();
  var staticHtml = '<tr> <th scope="row">' + $('#customSettingsTableContent tr').length + '</th> <td>new name</td><td>new last name</td><td> <a href="#" onclick="removeCustomSetting(event)"> <div class="fa fa-close"></div></a> </td></tr>';
  $('#customSettingsTableContent').append(staticHtml);
}
function removeCustomSetting(event) {
  var t = $('#customSettingsTableContent tr').eq(0).find('th').length;
  event.target.closest('tr').remove(); // you will only need this line of code
  if ($('#customSettingsTableContent tr').length == 1) {
    $('#customSettingsTableContent').append('<tr class="noRecords"> <td colspan="' + t + '">No More Records!</td></tr>')
  }
}
a .fa {
  width: 2em;
  height: 2em;
  display: inline-block;
  cursor: pointer;
  background: #eee;
  text-align: center;
  line-height: 2;
}
a:hover .fa {
  background: #FFC107;
}
body {
  padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<button type="button" onclick="addCustomSetting()" class="btn btn-primary">
  <div class="fa fa-plus"></div>
</button>
<table id="customSettingsTableContent" class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>
        <a href="#" onclick="removeCustomSetting(event)">
          <div class="fa fa-close"></div>
        </a>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>
        <a href="#" onclick="removeCustomSetting(event)">
          <div class="fa fa-close"></div>
        </a>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>
        <a href="#" onclick="removeCustomSetting(event)">
          <div class="fa fa-close"></div>
        </a>
      </td>
    </tr>
  </tbody>
</table>

希望这有帮助..:)

相关文章：