在javascript中，在body或window中删除元素

当用户单击页面上除<span class="yes-items" id="yes-items">以外的任何位置时，我想删除<span class="yes-items" id="yes-items">。

此外，去除<span class="yes-items" id="yes-items">后，检查留在<input type="checkbox" name="Yes" id="okey">中或者当用户点击No时，删除<input type="checkbox" name="Yes" id="okey">和<span class="yes-items" id="yes-items">中的复选框

请帮我做这项工作。如果你有解决这个问题的建议，谢谢你告诉我。事先感谢您的合作。

const confirm = document.getElementById('confirm');
confirm.addEventListener('click', function() {
const yes = document.querySelector('input[type="checkbox"]:checked');
const yesItems = document.getElementById('yes-items');
if (yes.checked == true) {
yesItems.style.display = "block";
}
document.querySelector('body').addEventListener('click', function(e) {
if (e.target.yes.checked == true) {
yesItems.style.display = "none";
}
});
});

items {
border: 1px solid red;
padding: .5rem;
border-radius: 10px;
}
span.yes-items {
position: absolute;
border: 2px solid var(--c1);
color: var(--txt);
background-color: #e6eef7;
top: 20%;
left: 0;
width: 94%;
padding: 1rem;
border-radius: 10px;
display: none;
}
span.yes-items input {
width: auto;
}

<p class="items">
<span class="label">example</span>
<span class="label-items">
<label class="label-item" for="okey" id="confirm">
<input type="checkbox" name="Yes" id="okey">
Yes
</label>
<label class="label-item">
<input type="checkbox" name="No" id="No">
No
</label>
</span>
<span class="yes-items" id="yes-items"><span>                                            
<label for="Diabetic">
<input type="checkbox" name="Diabetic" id="Diabetic">
1
</label>
</span>
<span>                                            
<label for="Diabetic">
<input type="checkbox" name="Diabetic" id="Diabetic">
2
</label>
</span>
<span>                                            
<label for="Diabetic">
<input type="checkbox" name="Diabetic" id="Diabetic">
3
</label>
</span>
<span>                                            
<label for="Diabetic">
<input type="checkbox" name="Diabetic" id="Diabetic">
4
</label>
</span>
<span>                                            
<label for="Diabetic">
<input type="checkbox" name="Diabetic" id="Diabetic">
other
<textarea class="explain" placeholder="Define Other" cols="50" rows="3"></textarea>                       
</label>
</span>
</span>
</p>

你可以使用npm https://www.npmjs.com/package/onclick-outside的这个库。使用它。不要忘记做的事情:

npm init

由于您不能使用任何包，所以我必须告诉您这样做->

<html onclick="hide()">
<head>
Your head stuff
<style>
.yes-items{
display:block //important!
}
</style>
</head>
<body>
Your code
<span class="yes-items" id="yes-items" onClick="donotHide()"></span>
</body>
<script>
function hide(){
var elementToHide = document.getElementById('yes-items');
if(elementToHide.style.display = "block"){
elementToHide.style.display = "none";
document.getElementById("yes-items").onclick = () =>{ 
elementToHide.style.display="block"}
}
else{
elementToHide.style.display="block"
}
document.getElementById("yes-items").onclick = () =>{ 
elementToHide.style.display="block"} </script> </html>

相关内容

最新更新

热门标签：