如何选择随机的子元素

huangapple go评论79阅读模式
英文:

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(&#39;.btn&#39;).onclick = () =&gt; {
  let parentSelector = document.querySelector(&#39;.parent&#39;);
  // 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(&#39;.parent&gt;span:nth-child(&#39; + random + &#39;)&#39;);
  if(child) {
    console.log(child);
    child.remove();
  }
}

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
  &lt;span&gt;child #1&lt;/span&gt;
  &lt;span&gt;child #2&lt;/span&gt;
  &lt;span&gt;child #3&lt;/span&gt;
  &lt;span&gt;child #4&lt;/span&gt;
  &lt;span&gt;child #5&lt;/span&gt;
  &lt;span&gt;child #6&lt;/span&gt;
  &lt;span&gt;child #7&lt;/span&gt;
&lt;/div&gt;

&lt;button class=&quot;btn&quot;&gt;Delete a child !&lt;/button&gt;

<!-- 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

&lt;script&gt;
function remove(){
  var elements = document.getElementsByClassName(&#39;parent&#39;)[0].children;
  if(elements.length  == 1)
  	return;
  
  elements[getRandom(elements.length-1)].remove();
  if(elements.length &gt; 1){
  	elements[getRandom(elements.length-1)].remove();
  }
}

function getRandom(max){
	return Math.floor(Math.random() * (max - 0 + 1)) + 0;
}

&lt;/script&gt;

&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;div&gt;5&lt;/div&gt;
&lt;button onclick=&quot;remove();&quot; &gt;Remove&lt;/button&gt;

答案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(&#39;.parent&gt;div&#39;));
if(randomDivChild) randomDivChild.remove();

Nothing else needed. Check out the site for documentation if needed, but it's pretty straightforward.

huangapple
  • 本文由 发表于 2020年1月6日 20:55:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612508.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定