javascriptを使用してテーブル全体を削除するには？

Question

私はカレンダーテーブルを持っています。これは、ユーザーが次の月または前に見たい場合は月全体の日付を表示します。テーブル全体を削除し、同じ場所で新しいテーブルを置き換える必要があります。私はこれがうまく動作しないので、他の。

私はcalendar-datesからテーブルを削除する必要があります。私は運がなかった。私はremovechild（ "tb"）を使用しましたが、私はまた試みましたvar test = document.getElementById（ "calendarDates"）; test.removeChild（test.childNodes [0]）;ここで

は、テーブルのコードです：

document.getElementById("calendar-dates").appendChild(calendar); 

表：

//add calendar table 
    function get_calendar(day_no, days, m , y){ 
     var table = document.createElement('table'); 
     table.id = "tb"; 
     var tr = document.createElement('tr'); 

     //row for the day letters 
     for(var c=0; c<=6; c++){ 
      var td = document.createElement('td'); 
      td.innerHTML = "SMTWTFS"[c]; 
      tr.appendChild(td); 
     } 
     table.appendChild(tr); 

     //create 2nd row 
     tr = document.createElement('tr'); 
     var c; 
     for(c=0; c<=6; c++){ 
      if(c == day_no){ 
       break; 
      } 
      var td = document.createElement('td'); 
      td.innerHTML = ""; 
      tr.appendChild(td); 
     } 

     var count = 1; 
     for(; c<=6; c++){ 
      var td = document.createElement('td'); 
      td.innerHTML = count; 
      td.style.cursor = "pointer"; 
      td.id = count; 
      td.onclick = function() { 
       m = m + 1; 
       document.getElementById("cDD").value = this.id + "/" + m + "/" + y; 
       document.getElementById("calendar-container").style.display = "none"; 

      }; 
      count++; 
      tr.appendChild(td); 
     } 
     table.appendChild(tr); 

     //rest of the date rows 
     for(var r=3; r<=7; r++){ 
      tr = document.createElement('tr'); 
      for(var c=0; c<=6; c++){ 
       if(count > days){ 
        table.appendChild(tr); 
        return table; 
       } 
       var td = document.createElement('td'); 
       td.innerHTML = count; 
       td.style.cursor = "pointer"; 
       td.id = count; 
       td.onclick = function() { 
        m = m + 1; 
        document.getElementById("cDD").value = this.id + "/" + m + "/" + y; 
        document.getElementById("calendar-container").style.display = "none"; 
       }; 
       count++; 
       tr.appendChild(td); 
      } 
      table.appendChild(tr); 
     } 
     return table; 
    } 

Answer 1

• を空にinnerHtmlを設定することができremoveChild方法は、ノードではなく、IDを取ります。
• test.removeChild(test.childNodes[0]);は、テーブルの前にテキストノードがいくつかあるため動作しない可能性があります。
  • test.removeChild(test.firstElementChild)はおそらく

document.getElementById("calendar-dates").removeChild(document.getElementById('tb'))

document.querySelector('button').addEventListener('click',() => { 
 
    document.getElementById('wrapper').removeChild(document.querySelector('table')); 
 
})

table, th, td { 
 
    border: 1px solid red; 
 
    padding: 2px 
 
}

<div id="wrapper"> 
 
    <table> 
 
    <tr> 
 
     <td>Table</td> 
 
     <td>Content</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<button>Remove table</button>

Answer 2

#calendar-datesは、テーブル以外のHTMLが含まれていますか？そうでない場合、あなたは

var calendarDates = document.getElementById("calendar-dates"); 

calendarDates.innerHtml = ''; 
calendarDates.appendChild(calendar);