currently I am making my own project and I faced a problem. I made a code like below to Select/Unselect/Delete checkbox(include its grandparent Element(.layout)).
However, somehow It only works 50%. When I create a lot of checkboxes and try to select or unselect them, it works perfectly fine. But if I try to delete them after selecting them all, it only deletes half of them, and I click it again, and it deletes half of them remain and do this over and over until only one checkbox is left. This is not the only problem I have. When there is only a single checkbox, I can not select, unselect, or delete it with buttons I made. could you tell me what is wrong with my code and how to solve it, please?
//P.S below code is just part of my code to summarize code so I can show you the exact part of my problem. If you need a whole code send me message I will show you :)
thx.
const selectAll = document.querySelector(".select");
const unselectAll = document.querySelector(".unselect");
const deleteIndex = document.querySelector(".delete");
selectAll.addEventListener("click", selectAllindex);
unselectAll.addEventListener("click", unselectAllindex);
deleteIndex.addEventListener("click", deleteDiaryIndex);
function selectAllindex(i) {
i.preventDefault();
for (i = 0; i < testform.checkboxchild.length; i++) {
console.log(testform.checkboxchild.length);
testform.checkboxchild[i].checked = true;
}
}
function unselectAllindex(i) {
i.preventDefault();
for (i = 0; i < testform.checkboxchild.length; i++) {
testform.checkboxchild[i].checked = false;
}
}
function deleteDiaryIndex(i) {
i.preventDefault();
for (i = 0; i < testform.checkboxchild.length; i++) {
if (testform.checkboxchild[i].checked) {
removeDiv(testform.checkboxchild[i]);
}
}
}
function removeDiv(d) {
console.log(d.parentElement.parentElement);
d.parentElement.remove();
}.trash{
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./test.css" />
</head>
<body>
<form action="" name="testform" class="test">
<div class="divs">
<div class="layout">
<div class="checkboxs">
<input type="checkbox" name="checkboxchild" id="" />
</div>
</div>
<div class="layout">
<div class="checkboxs">
<input type="checkbox" name="checkboxchild" id="" />
</div>
</div>
<div class="layout">
<div class="checkboxs">
<input type="checkbox" name="checkboxchild" id="" />
</div>
</div>
<div class="layout">
<div class="checkboxs">
<input type="checkbox" name="checkboxchild" id="" />
</div>
</div>
</div>
<div class="buttons">
<button class="selector select" value="selectall">Select All</button>
<button class="selector unselect" value="unselectall">
Unselect All
</button>
<button class="selector delete" value="delete">Delete</button>
</div>
</form>
<script src="./test.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire