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

Question

我想做一个基本的收件箱函数。它包含3条消息。因此，我想在用户单击DELETE按钮时，将msg1的显示设置为none，并减小消息值。以下是示例代码：

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>

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

Answer 1

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

为了能够用单个函数实现这一点，您可以使用this来引用最初触发回调函数的元素，使用.closest()来访问单亲包装器。

备注：

• 不要使用内联HTML事件属性，如onclick。将HTML和JavaScript分离并使用.addEventListener()将元素绑定到事件回调。甚至MDN也建议不要使用他们
• 不要使用.getElementsByClassName()，因为它是25岁以上的儿童API，具有显著的性能影响。相反，请使用现代CCD_ 6方法
• 如果可以避免.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>

Answer 2

解释

这里有一个足够简单的解决方案，每次想要更新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>

Answer 3

我给你的建议是：永远不要在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>