【JavaScript】クリックで特定のフォームやテーブル行を消す

クリックで特定の要素を削除するJavaScript

クローズボタン(✖)をクリックすると、特定の入力欄やテーブル行が削除される実装方法を紹介します。不要になった入力フォームなど、特定のHTML要素を消すのに使えます。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

なお、入力フォームを増やす方法は以下記事で紹介しています。本記事と合わせての実装がオススメです。

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例

入力フォームを増やしたり消したり
テーブルの行を増やしたり消したり
XXX YYY
AAA aaa
BBB bbb
CCC ccc

コード

XXX.remove()

XXX要素を削除するメソッド。以下のように記述することで、特定のHTML要素を削除できる。

const btn = document.getElementById('btn');

btn.remove();
  • 「id = “btn”」を持つ要素を削除するJavaScript
document.createElement(‘YYY’)

YYY要素を生成するメソッド。以下のように記述することで特定の要素を生成し、変数に格納できる。

const newDiv = document.createElement('div');
  • div要素を生成し、変数newDivに格納する。
  • 生成した要素は、appendChild()などのメソッドでHTMLに追加する。

入力フォームを増やしたり消したりする

HTML/CSS/JavaScript コードはこちら
<div id="form-block">
  <button>入力欄を増やす</button>
  <div class="item">
    <label>連絡事項:<input type="text"></label><span class="close-icon">✖</span>
  </div>
  <div class="item">
    <label>連絡事項:<input type="text"></label><span class="close-icon">✖</span>
  </div>
  <div class="item">
    <label>連絡事項:<input type="text"></label><span class="close-icon">✖</span>
  </div>
</div>
div#form-block {
  width: 100%;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
}

div.item {
  height: 36px;
  margin-bottom: 8px;
}

label {
  margin: 8px 8px 0 0;
}

button {
  width: 50%;
  height: 2.5em;
  margin-bottom: 16px;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
}

.close-icon {
  cursor: pointer;
}

button:hover,
.close-icon:hover {
  opacity: .7;
}

button:active {
  opacity: .4;
}
const btn = document.querySelector('button');
const form = document.getElementById('form-block');
const closeIcons = document.querySelectorAll('.close-icon');
const items = document.querySelectorAll('.item');

// 新しいフォームを作成し、作成したフォームを返す関数
function createNewForm() {
  const newDiv = document.createElement('div');
  newDiv.classList.add('item');

  const newForm = document.createElement('input');
  newForm.type = 'text';
  
  const newLabel = document.createElement('label');
  newLabel.textContent = '連絡事項:';

  const newSpan = document.createElement('span');
  newSpan.classList.add('close-icon');
  newSpan.textContent = '✖';
  
  newLabel.appendChild(newForm);
  newDiv.appendChild(newLabel);
  newDiv.appendChild(newSpan);

  return newDiv;
}

// 「✖」をクリックしたときの処理
for (let j = 0; j < closeIcons.length; j++) {
  closeIcons[j].addEventListener('click', () => {
    items[j].remove();
  });
}

// ボタンをクリックしたときの処理
btn.addEventListener('click', () => {
  form.appendChild(createNewForm());

  const closeIcons = document.querySelectorAll('.close-icon');
  const items = document.querySelectorAll('.item');

  for (let i = 0; i < closeIcons.length; i++) {
    closeIcons[i].addEventListener('click', () => {
      items[i].remove();
    })
  }
});

テーブルの行を増やしたり消したりする

HTML/CSS/JavaScript コードはこちら
<div id="table-block">
  <button>行を増やす</button>
  <table>
    <thead>
      <tr>
        <th>XXX</th>
        <th>YYY</th>
        <th class="clear-column"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="item">
        <td>AAA</td>
        <td>aaa</td>
        <td class="clear-column close-icon">✖</td>
      </tr>
      <tr class="item">
        <td>BBB</td>
        <td>bbb</td>
        <td class="clear-column close-icon">✖</td>
      </tr>
      <tr class="item">
        <td>CCC</td>
        <td>ccc</td>
        <td class="clear-column close-icon">✖</td>
      </tr>
    </tbody>
  </table>
</div>
.table-block {
  width: 100%;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
}

table, th, td {
  border-collapse: collapse;
  padding: 8px 16px;
  text-align: center;
}

thead {
  background-color: blue;
  color: white;
}

tbody tr:nth-child(odd) {
  background-color: #eee;
}

.clear-column {
  background-color: #fff;
  width: 40px;
}

button {
  width: 50%;
  height: 2.5em;
  margin-bottom: 16px;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
}

.close-icon {
  cursor: pointer;
}

button:hover,
.close-icon:hover {
  opacity: .7;
}

button:active {
  opacity: .4;
}
const btn = document.querySelector('button');
const tbl = document.getElementById('table-block');
const tbdy = document.querySelector('tbody');
const closeIcons = document.querySelectorAll('.close-icon');
const items = document.querySelectorAll('.item');

// 新しい行を作成し、作成した行を返す関数
function createNewTr() {
  const newTr = document.createElement('tr');
  newTr.classList.add('item');

  const newTd1 = document.createElement('td');
  newTd1.textContent = 'XXX';

  const newTd2 = document.createElement('td');
  newTd2.textContent = 'xxx';
  
  const newTdClose = document.createElement('td');
  newTdClose.classList.add('close-icon','clear-column');
  newTdClose.textContent = '✖';
  
  newTr.appendChild(newTd1);
  newTr.appendChild(newTd2);
  newTr.appendChild(newTdClose);

  return newTr;
}

// 「✖」をクリックしたときの処理
for (let j = 0; j < closeIcons.length; j++) {
  closeIcons[j].addEventListener('click', () => {
    items[j].remove();
  });
}

// ボタンをクリックしたときの処理
btn.addEventListener('click', () => {
  tbdy.appendChild(createNewTr());

  const closeIcons = document.querySelectorAll('.close-icon');
  const items = document.querySelectorAll('.item');

  for (let i = 0; i < closeIcons.length; i++) {
    closeIcons[i].addEventListener('click', () => {
      items[i].remove();
    })
  }
});
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次