JavaScript删除模态onclick并减少计数器

如何解决JavaScript删除模态onclick并减少计数器

我想做一个基本的收件箱功能。它包含 3 条消息。 所以我想在用户点击 DELETE 按钮时做到这一点，将 msg1 的显示设置为无，并减少消息值。 下面是示例代码：

var x = 2;

function deleteMsg1() {
  
  var msg1 = document.getElementsByClassName("cont");
    if (confirm("Are you sure to want to delete this message?")) {
      msg1[0].style.display = "none";
      x = x-1;
    } else {

    }

}

function deleteMsg2() {
  
  var msg2 = document.getElementsByClassName("cont2");
    if (confirm("Are you sure to want to delete this message?")) {
      msg2[0].style.display = "none";
      x = x-1;
    } else {

    }

}

document.getElementById("msgcount").innerHTML = x;

.cont,.cont2 {
background-color: red;
padding: 5px;
width: 100px;
margin: 25px 0;
}

.show {
display: block;
}

<h1>There are <span id="msgcount"></span>messages</h1>
<button onclick="deleteMsg1()">Delete</button>
<div class="cont">
  Some text...
</div>
<br><br>
<button onclick="deleteMsg2()">Delete</button>
<div class="cont2">
  Some text...
</div>

我知道这不是最好的主意，但我想这很糟糕。 我想我应该用一个 function() 来做这件事并尝试一些事件监听器，但我真的不知道该怎么做。 有什么想法或帮助吗？

解决方法

说明

这是一个足够简单的解决方案，每次要更新 x 的值时都需要手动更新 HTML。这就是为什么我创建了一个 updateX 函数，它只会获取值并更新 DOM，就这么简单。

const updateX = (x) => {
  document.getElementById("msgcount").innerHTML = x;
};

let x = 2;

const del = (className) => {
  const msg = document.getElementsByClassName(className);

  if (confirm("Are you sure to want to delete this message?")) {
    msg[0].style.display = "none";
    x--;
  } else {
    console.log("===");
  }

  updateX(x);
};

updateX(x);

.cont,.cont2 {
  background-color: red;
  padding: 5px;
  width: 100px;
  margin: 25px 0;
}

.show {
  display: block;
}

<h1>There are <span id="msgcount"></span>messages</h1>
<button onclick="del('cont')">Delete</button>
<div class="cont">
  Some text...
</div>
<br/><br/>
<button onclick="del('cont2')">Delete</button>
<div class="cont2">
  Some text...
</div>

,

您应该将每条消息的 HTML 包装在一个父元素中，这样您就可以将构成一条消息的每组元素视为一个单元并一次性将其全部删除。

为了能够使用单个函数执行此操作，您可以使用 this 来引用首先触发回调函数的元素，并使用 .closest() 来访问单父包装器。>

注意事项：

• Do not use inline HTML event attributes，比如 onclick。 将 HTML 和 JavaScript 分开并使用 .addEventListener() 将元素绑定到事件回调。 Even MDN recommends not using them.
• Do not use .getElementsByClassName() 因为它是一个 25 岁以上的人 具有重大性能影响的 API。相反，使用 现代 .querySelectorAll() 方法。
• 如果可以避免使用 .innerHTML，请不要使用它，因为它具有安全性和 性能影响。由于您要更新的文本 无论如何都没有任何 HTML，.innerHTML 是不保证的。 而是使用 .textContent。

// Do your event binding in JavaScript,not HTML
document.querySelectorAll("button").forEach(function(element){
  element.addEventListener("click",function(){
    if (confirm("Are you sure to want to delete this message?")) {
      // All you need to do is delete the nearest complete
      // ancestor message construct,which can be done with
      // the .closest() method
      this.closest(".message").remove();
      updateMessageCount();
    }
  });
});

function updateMessageCount(){
  // Set the count equal to the length of the 
  // collection returned by searching for all the
  // messages
  document.getElementById("msgcount").textContent =
       document.querySelectorAll(".message").length;
}

updateMessageCount();

.cont,.cont2 {
background-color: red;
padding: 5px;
width: 100px;
margin: 25px 0;
}

.show {
display: block;
}

<h1>There are <span id="msgcount"></span> messages</h1>

<!-- By wrapping each message,you can treat all its HTML
     as one single unit. -->
<div class="message">
  <button>Delete</button>
  <div class="cont">
    Some text...
  </div>
</div>
<br><br>
<div class="message">
  <button>Delete</button>
  <div class="cont">
    Some text...
  </div>
</div>

,

我给你的建议：永远不要在html结构tags内声明事件js！如这里：

<button onclick="deleteMsg1()">Delete</button>

这是一种非常糟糕的做法。这有很多缺点。这可能会导致不良后果。

我使用 forEach() 方法为您制作了一个解决方案，而没有在 html 中使用 javascript。

删除按钮也被删除了。

let msg = document.querySelectorAll(".cont");
let btn_del = document.querySelectorAll('.btn_del');
let x = 2;

btn_del.forEach(function (btn_del_current,index) {
    btn_del_current.addEventListener('click',function () {
        if (confirm("Are you sure to want to delete this message?")) {
            this.style.display = "none";
            msg[index].style.display = "none";
            x = x - 1;
            document.getElementById("msgcount").innerHTML = x;
        } else {}
    });
});

.cont,.cont2 {
  background-color: red;
  padding: 5px;
  width: 100px;
  margin: 25px 0;
}

.show {
  display: block;
}

<h1>There are <span id="msgcount"></span>messages</h1>
<button class="btn_del">Delete</button>
<div class="cont">
  Some text...
</div>
<br><br>
<button class="btn_del">Delete</button>
<div class="cont">
  Some text...
</div>