I'm very new to programming, as you can probably tell. I'm trying to write a code for the trash button (image) that will remove the "row username" and "row expDate" elements with the same index class as the trash button. However, for some reason, it doesn't work and gives the error in the image that I uploaded below the page. I would appreciate it if you could help me identify the problem with the code. Thanks in advance!
如你所知,我对编程非常陌生。我正在尝试为回收站按钮(图像)编写一段代码,该代码将删除与回收站按钮具有相同索引类的“row username”和“row expDate”元素。然而,由于某些原因,它不起作用,并在我上传到页面下方的图像中给出错误。如果您能帮我找出代码的问题,我将不胜感激。提前谢谢!
the error in the console :
控制台中的错误:
const addbtn = document.querySelector(".newuser");
const addUserInp = document.querySelector(".addUser");
const expDate = document.querySelector(".expDate");
const userName = document.querySelector(".username");
const trash = document.querySelector(".trash");
const submitbtn = document.querySelector(".submit");
const uninp = document.querySelector(".uninp");
const edinp = document.querySelector(".edinp");
const userNameInput = document.querySelector(".usernamekey.adduserinp");
const expDateInput = document.querySelector(".expdatekey.adduserinp");
const rowz = document.querySelector(".rows");
submitbtn.addEventListener("click", function() {
const unl = document.querySelectorAll(".row.username").length;
const edl = document.querySelectorAll(".row.expDate").length;
let un = userNameInput.value;
let ed = expDateInput.value;
rowz.insertAdjacentHTML(
"beforebegin",
`<h2 class="usernum">User ${unl + 1} </h2>
<div class="row username ${unl + 1}">
<p class=""><img src="profile-user.png" alt="">
<img class="verticalline" src="icons8-vertical-line-100.png" alt="">${un}</p>
</div>
<div class="row expDate ${edl + 1}">
<p class="">
<img src="icons8-date.gif" alt="">
<img class= "verticalline" src= "icons8-vertical-line-100.png" alt="">${ed}
</p>
</div>
<img src="icons8-edit-30.png" alt="" class="edit ${unl + 1}">
<img src="trash.png" alt="" class="trash ${unl + 1}">`
);
document.querySelectorAll(".trash").forEach(function(button) {
button.addEventListener("click", function() {
const indexClass = button.classList[1];
console.log("Index class:", indexClass);
document.querySelector(".row.username." + indexClass).remove();
});
});
});
<div class="container">
<div class="lists">
<p class="sectionTitle">Users List</p>
<div class="rows">
<img class="newuser" src="icons8-add-user-64.png" alt="">
<img class="save" src="icons8-save-96.png" alt="">
<div class=" addUser hidden ">
<div class="uninp">
<input class="usernamekey adduserinp " type="text" placeholder="User Name">
</div>
<div class="edinp">
<input class="expdatekey adduserinp " type="date" placeholder="Expiry Date">
</div>
<button class="submit">Submit</button>
</div>
</div>
</div>
</div>
<script src="UserList.js"></script>
更多回答
Class names cannot start with numbers, so .2
is an invalid (part of your) selector and will throw an error. Change it so user-2
or something and it will work.
类名不能以数字开头,因此.2是无效的(您的)选择器的一部分,并将抛出一个错误。将其更改为USER-2或其他值,它就会起作用。
I made you a snippet. It was missing a lot of </div>
s
我给你做了一小段。错过了很多
S
The error message is very clear. The selector is invalid. they cannot start with a digit, or a hyphen followed by a digit
错误消息非常清楚。选择符无效。它们不能以数字开头,也不能以连字符后跟数字开头
Which characters are valid in CSS class names/selectors?
在css类名称/选择器中哪些字符是有效的?
You do not event need a selector here if you delegate, and the event handler will work for all new buttons too.
如果委托,则此处不需要事件选择器,并且事件处理程序也将适用于所有新按钮。
I strongly suggest you move the h2 inside the row div so you do not need to separately remove that too (but you can if you insist)
我强烈建议您将h2移动到行div中,这样就不需要单独删除它了(但如果您坚持的话,可以这样做)。
document.querySelector(".container").addEventListener("click", (e) => {
const tgt = e.target.closest("button.trash");
if (tgt) tgt.closest("div.row").remove();
});
更多回答
What? Very opinionated but it does not really solve the query selector issue?
什么?非常固执己见,但它并没有真正解决查询选择器问题?
@somethinghere Ok, added why it did not work, but it is not even needed when delegating and navigating using closest
@SomethingHere OK,添加了为什么它不起作用,但在使用最近的委托和导航时甚至不需要它
Yeah, okay, fine enough. It's just very opinionated - your approach is valid, but turns the whole thing around a bit even though the other approach was fine too.
好的,好的,很好。这只是非常固执己见--你的方法是有效的,但即使另一种方法也很好,但它还是有点扭转了整个情况。
I agree. It is one of my strongest opinions in JS when more than one event handler is needed. In this case it is almost mandatory - not only do we need to delete the parent div, but it is inserted after load.
我同意。当需要多个事件处理程序时,这是我在JS中最强烈的观点之一。在这种情况下,它几乎是强制性的--我们不仅需要删除父div,还需要在加载之后插入它。
我是一名优秀的程序员,十分优秀!