Javascript 表示・非表示の方法について

Question

（困っていること）
現在テーブルの表示・非表示をdisplay:noneを使用して実装しているのですが、display:noneを使用した場合DOMは存在しているため、実装上不都合があります（必須チェックが走ってしまう、空の値が次の処理へ渡されてしまう。）

表示・非表示方法について、DOM自体を表示させないような、表示・非表示の方法があれば教えていただきたいです。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を質問文に追記されたほうが回答を得やすいと思います。

Answer 1

不都合が起きる処理が走る際にdisplay:noneをチェックするという愚直な方法もあります。
表示非表示切り替えでDOM自体消すのはデメリットのが大きい気もします。

Answer 2

基本的には yambejp さんの対処が正攻法だという気がします。
が、あえてご質問の内容に忠実に答えるというのであれば方法もあるにはあります（筋のいい方法ではないです）

const toggleElement = element => {
  const { parentElement, previousSibling } = element;
  const df = document.createDocumentFragment();
  return () => {
    if (element.parentNode === df) {
      parentElement.insertBefore(df, previousSibling);
    }
    else {
      df.appendChild(element);
    }
  };
};

const toggleTable = toggleElement(document.getElementsByTagName('table')[0]);

toggleTable();  // 非表示
toggleTable();  // 表示
toggleTable();  // 非表示

https://jsfiddle.net/aksyLw3z/

Answer 3

必須チェックということは入力要素ですか？
であればdisabled設定すればよいでしょう

Answer 4

追記依頼の通り、実際のコードが無いと詳細がわかりませんが、例えばjQueryを使用していれば

$(window).on('load', function() {});

の中で該当のテーブルをdetatch()するというのはいかがでしょうか。

参考：https://qiita.com/BRSF/items/1aa9d154bde497b0baa0