如何删除特定行而不是始终删除第一行(Modal)

Question

我正在构建一个CRM应用程序，并在弹出模式中单击确认按钮时尝试删除特定的客户端，但它总是会删除第一个客户端。我知道这是由于类名不明确造成的，这个问题可以通过为每个客户机添加一个唯一的id来解决。我一直在寻找这类问题，但仍然不确定如何解决它。因为我是通过for循环生成每个客户端的，所以我可能需要为每个客户端动态创建一个唯一的id，并在javascript中调用特定的id，然后修改相应的CSS？我觉得这种方式可能过于复杂了。有没有其他方法可以达到我的目标？谢谢。

​

function clientmodal() {
  document.querySelector('.modal-bg').style.visibility = 'visible';
  document.querySelector('.modal-bg').style.opacity = '1';
}

function clientcancel() {
  document.querySelector('.modal-bg').style.visibility = 'hidden';
  document.querySelector('.modal-bg').style.opacity = '0';
}

.modal-bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s;
}

.delete-modal {
  background-color: white;
  border-radius: 10px;
  width: 30%;
  height: 13%;
  align-items: center;
}

.modal-title {
  text-align: center;
  margin-top: 15px;
}

<!-- client table -->

{% for user in clients %}

<tr class="mt-3">
  <td class="pt-3">{{ user.level }}</td>
  <td class="pt-3"><a href="{% url 'clients' user.id %}">{{ user.first_name }}</a></td>
  <td class="pt-3">{{ user.last_name }}</td>
  <td class="pt-3">{{ user.country }}</td>
  <td class="pt-3">{{ user.contact }}</td>
  <td class="pt-3">{{ user.contact_number }}</td>
  <!-- <td><a href="#" class="btn btn-outline-primary btn-sm">Client Info</a>  -->
  <td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
    <a class="btn btn-outline-danger" onclick="clientmodal()">Delete</a></td>
</tr>


<!-- client modals -->

<div class="modal-bg">
  <div class="delete-modal">
    <div class="modal-title">
      <h3>Are you sure you want to delete this client?</h3>
    </div>
    <div class="modal-footer">
      <a type="button" class="btn btn-secondary cancel" onclick="clientcancel()">Cancel</a>
      <a href="{% url 'delete' user.id %}" class="btn btn-danger">Yes</a>
    </div>
  </div>
</div>
{% endfor %}

​

Answer 1

document.querySelector()搜索一个项目，当它找到其中一个项目时，它会将其删除。

在本例中，有多行搜索参数，因此它将查找多个项目，但始终选择第一个项目。

因此，您必须使用ID来标识线路。例如，您可以这样做：

<tr class="mt-3" id="line-user-{{ user.id }}">
    <td class="pt-3">{{ user.level }}</td>
    <td class="pt-3">all others TDs</td>
</tr>

var item = document.querySelector('#line-input-' + userId);
item.style.visibility = 'hidden';
item.style.opacity = '0';

Answer 2

几件事

请研究下面的代码

1. 我将模式移出循环，并在访问行时将用户ID发送给它
2. 我将可见性从CSS类移至.hide类
3. 我添加和删除此类
4. 我使用表体中的委派，该表体还包含数据属性中用户的ID

<代码>G29

我建议你不要有删除东西的href。谷歌机器人的一次访问将会清除你的用户数据库。取而代之的是使用我评论过的ajax

​

const modal = document.querySelector('.modal-bg');
const modalLink = modal.querySelector(".confirm");
let currentRow;
document.getElementById("tb").addEventListener("click", function(e) {
  const tgt = e.target;
  const parent = e.target.closest("tr");
  const id = parent.dataset.userid;
  currentRow = parent;
  if (tgt.classList.contains("delete")) {
    e.preventDefault()
    modal.classList.remove("hide");
    modalLink.href = `{{ url }}?id=${id}`;
  }
});
modal.addEventListener("click", function(e) {
  // e.preventDefault(); // here you REALLY should ajax
  if (currentRow && e.target.classList.contains("confirm")) currentRow.remove()
  modal.classList.add("hide");
})

.modal-bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: visibility 0s, opacity 0.5s;
}

.delete-modal {
  background-color: white;
  border-radius: 10px;
  width: 30%;
  height: 13%;
  align-items: center;
}

.modal-title {
  text-align: center;
  margin-top: 15px;
}

.hide {
  visibility: hidden;
  opacity:0;
}

<table>
  <tbody id="tb">
    <tr class="mt-3" data-userid="{% user.id %}">
      <td class="pt-3">1</td>
      <td class="pt-3"><a href="">A1</a></td>
      <td class="pt-3">B1</td>
      <td class="pt-3">C1</td>
      <td class="pt-3">D1</td>
      <td class="pt-3">E1</td>
      <td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
        <a class="btn btn-outline-danger delete">Delete</a></td>
    </tr>
    <tr class="mt-3" data-userid="{% user.id %}">
      <td class="pt-3">2</td>
      <td class="pt-3"><a href="">A2</a></td>
      <td class="pt-3">B2</td>
      <td class="pt-3">C2</td>
      <td class="pt-3">D2</td>
      <td class="pt-3">E2</td>
      <td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
        <a class="btn btn-outline-danger delete">Delete</a></td>
    </tr>
  </tbody>
</table>

<!-- client modals -->

<div class="modal-bg hide">
  <div class="delete-modal">
    <div class="modal-title">
      <h3>Are you sure you want to delete this client?</h3>
    </div>
    <div class="modal-footer">
      <a type="button" class="btn btn-secondary cancel">Cancel</a>
      <a href="" class="btn btn-danger confirm">Yes</a>
    </div>
  </div>
</div>

​