как удалить случайный th со страницы, используя js - PullRequest
Новая
       10

как удалить случайный th со страницы, используя js

0 голосов
/ 24 апреля 2020

У меня есть таблица: 

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

Мне нужно добавить кнопку УДАЛИТЬ, при нажатии она должна удалить случайный 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';
              }
            });

Но она удаляет несколько th, мне нужно только 1-й каждый раз, когда я нажимаю.

Ответы [ 4 ]

0 голосов
/ 24 апреля 2020 

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>
0 голосов
/ 24 апреля 2020

Вы должны сгенерировать случайное число для длины th и затем удалить из домена после нажатия кнопки удаления.

Извлечь фрагмент рабочего кода 

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 голосов
/ 24 апреля 2020

Вы можете проверить это решение. Вам не нужно для l oop для этого. Также 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 голосов
/ 24 апреля 2020

Это происходит потому, что вы нажимаете кнопку for l oop внутри кнопки. Если вы удалите его, ваш код будет работать нормально: 

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