質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

3721閲覧

特定のクラスを持つtdの削除

Anon_tmr

総合スコア23

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2017/09/04 01:14

編集2017/09/04 02:19

こんにちは。

JavaScriptに携わり始めて2か月ほどのレベルの者です。

タイトルの通りなのですが、うまくいかずつまずいてしまっています。

消したい<td>はこの位置にある<td>です。

JavaScript

1<table class="form_table"> 2 <tr class="group"> 3 <th>メイングループ</th> 4 <td> 5 <table class="update"> 6 <tbody> 7 <tr> 8 <td> 9 </td> 10 <td> 11 <button type="button" class="delete"> 12 </td> 13 <td class="button"> 14 </td> 15 </tr> 16 </table> 17 </td> 18

*コードの記述範囲広げました。

このテーブルの中の、真ん中にある<td>である<~class="delete">になっている<td>
削除したいと思っています。

消したい部分のレイアウトは
現場名(-)(+)

という見え方で、真ん中にある(-)のボタンを特定の条件で削除したいと思っています。
この現場名やボタンの追加はJavaScriptでinsertCell()等を使用して行っており、jspでは<tr><td>は記述していません。

どのように記述すれば特定の<td>を削除することができるでしょうか。

初歩的な質問で恐れ入りますが、ご教授いただけると幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuzzball

2017/09/04 01:21

Javaは関係ないですよね?タグを削除して下さい。
Anon_tmr

2017/09/04 01:24

すいません。タグ消去しました。
m.ts10806

2017/09/04 01:39 編集

回答はしてしまいましたが、yamabejpさんの仰っていることも一理あります。削除したいテーブルがどのような構造のテーブルなのかなるべく全文ご提示願います。行削除ならまだいいんですが、その中の1セルのみ削除だとレイアウト上のリスクが大きいです。
Anon_tmr

2017/09/04 02:25

すいません。コード修正しました。全体の構造はこのような形になっています。
m.ts10806

2017/09/04 02:31 編集

htmlもまだ全体とは言えないような・・・。機密情報が含まれているようでしたら***やhogeなどを使って適当にマスクしてもらって構いません。また、現在組まれているjavascriptも追記いただいて良いですか?insertCell()も気になるので。
guest

回答4

0

テーブルのように縦×横がきまっている構造に対して
一部のtdを削除することは大変危険です
中身を空にするなどで対応したほうがよろしいかと思います

投稿2017/09/04 01:31

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/09/04 01:37

確かにそうですね。 質問者がやろうとしている用途も関係ありそうです。
Anon_tmr

2017/09/05 07:41

ご回答ありがとうございました! 勉強になります。ありがとうございます。
guest

0

JavaScriptのタグのみなので、通常のJavaScript APIの前提で回答しています。

ChildNode#remove

一番、楽なのは ChildNode#remove
ただし、IE11- 未対応なので Polyfill が必要です(MDN に Polyfill あり)。

Node.removeChild

後方互換性的には Node.removeChild

HTMLTableRowElement#deleteCell

最後に HTMLTableRowElement#deleteCell
ただし、この方法は HTMLTableCellElement#cellIndex を参照してから、tr要素ノードを検索して実行するので、前者2つよりも手間がかかります。

Re: Anon_tmr さん

投稿2017/09/04 01:38

編集2017/09/04 01:45
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Anon_tmr

2017/09/05 07:42

ご回答ありがとうございました! わざわざURLまで載せていただきお手数おかけしました。 ありがとうございます。使い方勉強します。
guest

0

removeClass()は指定要素から指定のクラスのみを削除するものであり、要素自体は削除しません。
jQueryならremove()などが利用できます。詳しくは下記を参考に試してみてください。

投稿2017/09/04 01:22

編集2017/09/04 01:42
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/09/04 01:40

> 生JSならdeleteRowなどが利用できます。 deleteRow はtr要素ノードの削除ではないでしょうか。
m.ts10806

2017/09/04 01:42

本当ですね。修正します。
Anon_tmr

2017/09/05 07:39

ご回答ありがとうございました! 私が記述したコードでどこが間違いだったのかも指摘してくださって勉強になりました。 ありがとうございます。
guest

0

自己解決

すいません!やりたいことをやるのにtdを削除できればいいなと思い質問させていただいていたのですが、
条件を設定して処理を分けるやり方で解決できました。削除ではなく念のためinnerHTML = "";で空にする方法にしました。ご回答いただきありがとうございました。

投稿2017/09/05 00:22

Anon_tmr

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/09/05 01:40

内容的には、yambejpさんの指摘が正解だったという事になると思うのですが、これは「自己解決」なのでしょうか。
Anon_tmr

2017/09/05 02:36

自己判断ではありますが... 私のベストアンサーの選び方は「回答内容によって質問内容が解決できたか」解決できる回答内容が複数ある場合は「説明・例えが一番わかりやすい」ということで選んでいます。 今回の私の質問内容は「特定のtdを削除できる方法があればご教授お願いします。」です。 yambejpさんのご指摘はためになるアドバイスだと私も感じています。しかし「特定のtdを削除する方法・そのような方法はない」といったように、質問内容が解決できる直接的な内容ではないと判断しました。また、tdの内容を空にするという方法は頭にあり、方法もわかっていたということもあります。 ただ、「特定のtdを削除する方法はあるのか」ということが疑問であったため質問しました。 今回行いたかった処理で「tdを消してしまったほうが良いのではないか」と判断し、このような質問をしたのは私の知識や経験不足なので恐縮ですが… 正直このサイトにおけるベストアンサーの選択基準や自己解決として扱って良い内容などを私は細かく把握していなかったので今回は上記の個人的な判断基準で質問内容を解決済という形にしました。以上が判断基準です。よろしくお願いします。
think49

2017/09/05 02:50

質問に対して「直接的な解」と「気づきを得る為のアドバイス」があった場合、どちらを選択するか見解の相違があるのは分かります。 Anon_tmr さんは質問に対しての回答をベストアンサーとして選ぶスタンスなのですね。 > ただ、「特定のtdを削除する方法はあるのか」ということが疑問であったため質問しました。 それでしたら、削除する方法を提案した回答に何のレスポンスもないのはなぜでしょうか。
Anon_tmr

2017/09/05 07:52

遅くなりました。申し訳ありません。 教えていただいたやり方で行ってみたのですが、エラーがでてしまっていました。 私の記述ミスだと思いますが、また改めて記述の仕方を再度質問して、回答を待つという時間をとるなら 効率が多少悪くてもとりあえず自分が頭に浮かんでるやり方で記述してレイアウトを整えて次の処理の記述に進んで機能を完成させたかったという思いがあり、レスポンスもせず作業を進めてしまっていました。 お時間割いて回答していただいたのに大変失礼しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問