我已经构建了一个包含 3 个输入的简单费用跟踪器
姓名输入
日期输入
金额输入
用户填写完这 3 个输入后，他们可以单击按钮将费用添加到表中并存储在表中。如果他们想从表格中删除费用，可以点击“REMOVE ENTRY”按钮。
如果表格为空，则显示“尚未添加费用!”tr 元素。添加费用后，带有消息的 tr 元素就会消失。但是，如果我将费用添加到表中然后将其删除，则带有消息的 tr 元素将不再出现。有什么办法可以让它重新出现？
let nameInput = document.querySelector(".name");
let dateInput = document.querySelector(".date");
let amountInput = document.querySelector(".amount");
let button = document.querySelector(".add-btn");
let ifEmpty = document.querySelector(".if-empty");
let table = document.querySelector("table");
button.addEventListener("click", function() {
ifEmpty.remove();
// CREATE THE EXPENSE
let holder = document.createElement("tr");
let row = document.createElement("td");
let btnRow = document.createElement("td");
let removeButton = document.createElement("button");
table.appendChild(holder);
holder.appendChild(row).textContent = nameInput.value;
holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
holder.appendChild(btnRow);
btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";
// REMOVE THE EXPENSE
removeButton.addEventListener("click", function() {
holder.remove();
});
/* TRIED THIS TO MAKE THE ELEMENT RE-APPEAR IF THE TABLE IS EMPTY BUT
IT DIDN'T WORK */
if (!table.contains(holder)) {
table.appendChild(ifEmpty);
}
});.container {
text-align: center;
}
h1 {
font-size: 3.5em;
}
h2 {
font-size: 2em;
margin-bottom: 0.5em;
color: green;
}
span {
font-size: 1.4em;
}
.date-amount-input {
margin-top: 0.5em;
}
input {
height: 28px;
}
.name {
padding-right: 5em;
}
.amount {
padding-right: 15.35em;
}
.amount-text {
margin-left: 0.4em;
}
.date {
padding-right: 18.8em;
}
.add-btn {
margin-top: 0.9em;
padding: 0.6em;
font-size: 1.1em;
background: green;
color: white;
border: none;
border-radius: 5px;
}
.add-btn:hover, .add-btn:focus {
cursor: pointer;
background: rgb(3, 177, 3);
}
table {
margin: 0 auto;
margin-top: 2em;
width: 50%;
height: 80px;
}
tr {
height: 40px;
}
table, th, td{
border: 1px solid rgba(0, 0, 0, 0.103);
border-collapse: collapse;
}
.empty-text {
font-size: 0.93em;
}
.if-empty {
background: rgba(0, 0, 0, 0.055);
}<body>
<div class="container">
<h1>Expense Tracker</h1>
<h2>Add A New Item</h2>
<div class="name-input">
<span class="name-text">Name: </span>
<input type="text" class="name" placeholder="Where was the expense made" size="117">
</div>
<div class="date-amount-input">
<span>Date: </span>
<input class="date" type="date">
<span class="amount-text">Amount: </span>
<input class="amount" type="text">
</div>
<button class="add-btn">Add Expense</button>
<table>
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
</tr>
<tr class="if-empty">
<td colspan = "4">
<span class="empty-text">No expenses added yet!</span>
</td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>我仍然是 JS 的初学者，所以任何提示都将不胜感激。
最佳答案
你做一个 ifEmpty.remove(); ，这实际上删除了元素。一旦它被删除它就消失了，如果不重新创建它就无法让它重新出现。
更简单的解决方案可能是隐藏它而不是删除它。
您可以使用 ifEmpty.style.display = "none"隐藏它和ifEmpty.style.display = "table-row"再次显示它
关于javascript - 如何让元素重新出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69811487/