英文:
How to choose random children
问题
我有以下问题:
我不知道如何让JavaScript删除一个随机的子元素。
我有一个DIV
(被随机选择)。在这个DIV
中有更多的DIV
,我想要一个JavaScript函数来删除一个或两个DIV
。但是其中有一个DIV
不应该被删除。目前我有这个:
if (spieleranzahl == 4) {
var del = document.getElementById(random)
if(del.hasChildNodes()){
let rdm = Math.floor(Math.random() * 4);
del.removeChild(del.childNodes[rdm]);
}
if(del.hasChildNodes()){
let mdr = Math.floor(Math.random()* 3);
del.removeChild(del.childNodes[mdr]);
}
}
感谢回答。
英文:
I have following Problem:
I have no clue how I let JavaScript delete a random Child.
I have a DIV
(gets randomly chosen). In this DIV
are more DIV
s and I want a JavaScript function that deletes one or two DIV
s. But there is one DIV
in there that shouldn't be deleted. For now I have this:
if (spieleranzahl == 4) {
var del = document.getElementById(random)
if(del.hasChildNodes()){
let rdm = Math.floor(Math.random() * 4);
del.removeChild(del.childNodes[rdm]);
}
if(del.hasChildNodes()){
let mdr = Math.floor(Math.random()* 3);
del.removeChild(del.childNodes[mdr]);
}
}
thanks for Answers.
答案1
得分: 1
你可以使用 :nth-child
选择器来获取一个随机的子元素。
document.querySelector('.btn').onclick = () => {
let parentSelector = document.querySelector('.parent');
// 确保我们获取一个介于 1 和子元素数量之间的随机数。
let random = Math.floor(1 + Math.random() * parentSelector.childElementCount);
child = document.querySelector('.parent>span:nth-child(' + random + ')');
if(child) {
console.log(child);
child.remove();
}
}
<div class="parent">
<span>子元素 #1</span>
<span>子元素 #2</span>
<span>子元素 #3</span>
<span>子元素 #4</span>
<span>子元素 #5</span>
<span>子元素 #6</span>
<span>子元素 #7</span>
</div>
<button class="btn">删除一个子元素!</button>
英文:
You could use the :nth-child
selector to get yourself a random child.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelector('.btn').onclick = () => {
let parentSelector = document.querySelector('.parent');
// we want to make sure we get a random number between 1 and the number of child.
let random = Math.floor(1 + Math.random() * parentSelector.childElementCount);
child = document.querySelector('.parent>span:nth-child(' + random + ')');
if(child) {
console.log(child);
child.remove();
}
}
<!-- language: lang-html -->
<div class="parent">
<span>child #1</span>
<span>child #2</span>
<span>child #3</span>
<span>child #4</span>
<span>child #5</span>
<span>child #6</span>
<span>child #7</span>
</div>
<button class="btn">Delete a child !</button>
<!-- end snippet -->
答案2
得分: 0
我理解您的问题是需要一次删除两个元素,只保留最后一个元素。
<script>
function remove() {
var elements = document.getElementsByClassName('parent')[0].children;
if (elements.length == 1)
return;
elements[getRandom(elements.length - 1)].remove();
if (elements.length > 1) {
elements[getRandom(elements.length - 1)].remove();
}
}
function getRandom(max) {
return Math.floor(Math.random() * (max - 0 + 1)) + 0;
}
</script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<button onclick="remove();">Remove</button>
英文:
I Understand from your question that you need to remove two elements at a time, leaving only the last element
<script>
function remove(){
var elements = document.getElementsByClassName('parent')[0].children;
if(elements.length == 1)
return;
elements[getRandom(elements.length-1)].remove();
if(elements.length > 1){
elements[getRandom(elements.length-1)].remove();
}
}
function getRandom(max){
return Math.floor(Math.random() * (max - 0 + 1)) + 0;
}
</script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<button onclick="remove();" >Remove</button>
答案3
得分: 0
使用randojs.com,你可以像这样完成:
var randomDivChild = rando(document.querySelectorAll('.parent>div'));
if (randomDivChild) randomDivChild.remove();
不需要其他内容。如果需要文档,请查看该网站,但它相当简单。
英文:
Using randojs.com, you can accomplish this like so:
var randomDivChild = rando(document.querySelectorAll('.parent>div'));
if(randomDivChild) randomDivChild.remove();
Nothing else needed. Check out the site for documentation if needed, but it's pretty straightforward.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论