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

2024年9月15日

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

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

実装例

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

連絡事項：✖

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

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

  // 「✖」をクリックしたときの処理を追加
  newSpan.addEventListener('click', () => {
    newDiv.remove();
  });

  return newDiv;
}

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

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

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

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

  // 「✖」をクリックしたときの処理を追加
  newTdClose.addEventListener('click', () => {
    newTr.remove();
  });

  return newTr;
}

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！