时间戳

首页 > 解决方案 > 删除页面中的内容时，刷新所有值

javascript - 删除页面中的内容时，刷新所有值

问题描述

我有一个项目清单。我可以创建一些项目。问题是当我按下删除按钮时，我希望所有值都刷新和更改。我怎样才能做到这一点？

例如，当我删除第三个数字时，第四个标签将是第三个。

$(document).on("click", ".addnew", function() {
  id = this.id;
  var idsh = parseInt(id.substr(3));
  var ids = parseInt(id.substr(3)) + 1;
  document.getElementById("ad_" + idsh).style.display = "none";
  kanban = document.getElementById("kanban");
  var btn = document.createElement("p");
  btn.id = "main_" + ids;
  btn.innerHTML =
    '<span type="text" id="co_' + ids + '" class="counter text-center bg-success text-white" >' + ids + ' </span>' +
    '<span  id="mo_' + ids + '" class="formulbitti text-center bg-success text-white" > inner </span>' +
    '<button id="de_' + ids + '" class="delete text-center bg-success text-white" >delete</button> ' +
    '<button type="text" id="ad_' + ids + '" class="addnew text-center bg-success text-white" >add</button>';
  kanban.appendChild(btn);
});

$("body").on("click", ".delete", function() {
  id = this.id;
  var ids = id.substr(3);
  $('#main_' + ids).remove();

});
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="kanban">
  <span type="text" id="co_1" class="counter text-center bg-success text-white">1</span>
  <span type="text" id="mo_1" class="formulbitti text-center bg-success text-white">inner</span>
  <button type="text" id="de_1" class="delete text-center bg-success text-white">delete</button>
  <button type="text" id="ad_1" class="addnew text-center bg-success text-white">add</button>
</div>

标签： javascriptjquery

解决方案

不要使用增量id属性。正如您在代码中看到的那样，它们增加了不必要的复杂性并且绝对没有任何好处。

完成您需要的最佳方法是使用 DOM 遍历将元素相互关联。您需要对 HTML 进行的唯一调整是添加一个新元素来对和元素div进行分组。单击按钮后，您可以从那里检索最近的容器并克隆/删除它。spanbuttonclosest().row

这样做的好处是 HTML 变得标准化，并且使用它的 JS 是相同的，无论内容或位置如何。

要解决在执行操作时更新计数器的问题，请创建一个函数，该函数遍历所有.counter元素并根据它们在 DOM 中的索引更新它们的文本。

最后请注意，button元素有一个typeofbutton或submit，从不text。

说了这么多，试试这个：

let $kanban = $('#kanban');
let updateCounters = () => $kanban.find('.counter').text(i => i + 1);

$(document).on("click", ".addnew", e => {
  $(e.target).closest('.row').clone().appendTo($kanban);
  updateCounters();
});

$(document).on("click", ".delete", e => {
  $(e.target).closest('.row').remove();
  updateCounters();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="kanban">
  <div class="row">
    <span type="text" class="counter text-center bg-success text-white">1</span>
    <span type="text" class="formulbitti text-center bg-success text-white">inner</span>
    <button type="button" class="delete text-center bg-success text-white">delete</button>
    <button type="button" class="addnew text-center bg-success text-white">add</button>
  </div>
</div>

最后要注意的一件事是，在每一行上都有一个表级别的“添加”按钮有点奇怪。在内容的顶部或底部有一个添加按钮会更有意义。

推荐阅读