如何用js从页面中随机删除一个Th值？

问题描述 投票：0回答：4

我有一个表。

 <table class="border" id="myTable">
      <tr>
        <th colspan="2">1</th>
        <th><a href="https://www.w3schools.com/css/css_quiz.asp" ><img class="img" src="cell.jpg"></a></th>
        <th>3</th>
        <th><a href="https://www.testdome.com/tests/html-css-online-test/13"><img class="img" src="cell.jpg"></a></th>
      </tr>
      <tr>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
      </tr>
      <tr>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
      </tr>
      <tr>
        <th>15</th>
        <th>16</th>
        <th>17</th>
        <th>18</th>
        <th>19</th>
      </tr>

    </table>

我需要添加一个按钮DELETE，点击后应该从页面中随机删除一个th。

 let targets = document.getElementsByTagName('th');
            let butDelete = document.createElement('button');
            butDelete.innerHTML = 'Delete th';
            document.body.appendChild(butDelete);
            butDelete.addEventListener('click', function(){
              for (i = 0; i < targets.length; i++) {
                 rand = Math.floor(Math.random() * targets.length);
                 targets[rand].style.display = 'none';
              }
            });

但是它删除了好几条，我需要每次点击只删除一条。

javascript html dom html-table dom-manipulation
4个回答
0
投票

这是因为你在起诉 for 循环内的按钮点击。如果你去掉这个，你的代码就会正常工作。

butDelete.addEventListener('click', function() {
  const rand = Math.floor(Math.random() * targets.length);
  targets[rand].style.display = 'none';
});
0
投票

你必须要生成一个随机的数字来表示这个按钮的长度 th 并在点击删除按钮后从dom中删除。

查看工作代码片段

const btn = document.querySelector('#deleteTH');

btn.addEventListener('click', (e) => {
  const ths = document.querySelectorAll('#myTable th');
  const thsLength = ths.length;
  const randomNumber = getRandomInt(thsLength);

  ths[randomNumber] && ths[randomNumber].remove()

  console.log(`removing th at ${randomNumber} position`)
});

function getRandomInt(max) {
  return (Math.floor(Math.random() * Math.floor(max)));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="border" id="myTable">
  <tr>
    <th colspan="2">1</th>
    <th>
      <a href="https://www.w3schools.com/css/css_quiz.asp"><img class="img" src="cell.jpg"></a>
    </th>
    <th>3</th>
    <th>
      <a href="https://www.testdome.com/tests/html-css-online-test/13"><img class="img" src="cell.jpg"></a>
    </th>
  </tr>
  <tr>
    <th>5</th>
    <th>6</th>
    <th>7</th>
    <th>8</th>
    <th>9</th>
  </tr>
  <tr>
    <th>10</th>
    <th>11</th>
    <th>12</th>
    <th>13</th>
    <th>14</th>
  </tr>
  <tr>
    <th>15</th>
    <th>16</th>
    <th>17</th>
    <th>18</th>
    <th>19</th>
  </tr>

</table>

<button type="button" id="deleteTH">Delete TH</button>
0
投票

你可以检查这个解决方案。你不需要使用for循环。display: none 删不掉 th. 您可以使用 remove() 为此。

let butDelete = document.createElement('button');
butDelete.innerHTML = 'Delete th';
document.body.appendChild(butDelete);
butDelete.addEventListener('click', function(){
  let targets = [...document.getElementsByTagName('th')];
  if(targets.length > 1) {
    console.log('remaining items', targets.length-1);
    rand = Math.floor(Math.random() * targets.length);
    targets[rand].remove();
  }
});
.as-console-wrapper {
  max-height: 20px !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table class="border" id="myTable">
      <tr>
        <th colspan="2">1</th>
        <th><a href="https://www.w3schools.com/css/css_quiz.asp" ><img class="img" src="https://i.picsum.photos/id/433/20/20.jpg"></a></th>
        <th>3</th>
        <th><a href="https://www.testdome.com/tests/html-css-online-test/13"><img class="img" src="https://i.picsum.photos/id/433/20/20.jpg" ></a></th>
      </tr>
      <tr>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
      </tr>
      <tr>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
      </tr>
      <tr>
        <th>15</th>
        <th>16</th>
        <th>17</th>
        <th>18</th>
        <th>19</th>
      </tr>

    </table>  
</body>
</html>
0
投票

let targets = document.getElementsByTagName('th');
//------------Added to ensure we delete the th which are not already deleted. 
// (delete here means setting display: none to that particular element)
let indices = []
for(var i = 0 ; i < targets.length; i++) {
    indices.push(i);
}
//-------------------------------------
let butDelete = document.createElement('button');
butDelete.innerHTML = 'Delete th';
document.body.appendChild(butDelete);
butDelete.addEventListener('click', function(){
        let randIndex = Math.floor(Math.random() * (indices.length));
        /*
         *   we pick a random index from indices
         *   as we know for sure that at any time, indices stores
         *   only those indices of th(in the targets array)
         *   whose display:none is not already set
        */ 
        let delIndex = indices.splice(randIndex, 1)[0];
        targets[delIndex].style.display = 'none';
});
table th {
                height: 10px;
                width: 50px;
                border: 1px solid black;
            }
            table {
                height: 200px;
                width: 360px;
            }
<table class="border" id="myTable">
            <tr>
              <th colspan="2">1</th>
              <th>2</th>
              <th>3</th>
              <th>4</th>
            </tr>
            <tr>
              <th>5</th>
              <th>6</th>
              <th>7</th>
              <th>8</th>
              <th>9</th>
            </tr>
            <tr>
              <th>10</th>
              <th>11</th>
              <th>12</th>
              <th>13</th>
              <th>14</th>
            </tr>
            <tr>
              <th>15</th>
              <th>16</th>
              <th>17</th>
              <th>18</th>
              <th>19</th>
            </tr>
      
          </table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.