英文:
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 DIVs and I want a JavaScript function that deletes one or two DIVs. 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论