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

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

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

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

Q&A

3回答

6000閲覧

JSで任意のinnerHTMLを削除したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2015/09/03 09:14

先日同じような質問をさせていただいたのですが初心者の私にはとても難しく理解できなかったのでもう一度質問させていただきます
下記のコードはテキストボックスで受け取った内容をinnerHTMLで表示し保存するという簡易ToDo管理です。(まだ保存の部分は書いていません)

ここで問題なのが下記のコードで削除ボタンを押すとすべて消えてしまうということです。
それは削除指定している場所が<div id="txt_show">全体になっているのですべて消えます。
ここまでは自分でもわかっているのですがどうすれば任意のものだとを削除できるかわかりません
申し訳ないのですが初心者なのでできるだけ簡単に噛み砕いて説明していただきたいと思っております
よろしくお願いします

JavaScript

1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 6</head> 7<body> 8 <!--MEMO追加フォーム--> 9 <input type="text" id="text" placeholder="TextValue"> 10 <input type="button" value="Add" onclick="add_txt();"> 11 <!--MEMO表示--> 12 <div id="txt_show"></div> 13<script > 14 //MEMO追加関数 15 function add_txt(){ 16 var text = document.getElementById('text').value; 17 var txt_show = document.getElementById('txt_show').innerHTML; 18 if(txt_show != ""){ 19 txt_show += "<br>"; 20 } 21 document.getElementById('txt_show').innerHTML = txt_show + text + "<input type='button' value='Del' onclick='del_txt();'>"; 22 } 23 24 //MEMO削除関数 25 function del_txt(){ 26 document.getElementById('txt_show').innerHTML = ""; 27 } 28 29 //セーブ&ロード 30</script> 31 32</body> 33</html> 34

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

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

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

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

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

guest

回答3

0

html

1<script type="text/javascript" src="15636.js"></script> 2</head> 3<body> 4KEY<input type="text" id="K"> => VALUE<input type"text" id="V"> 5<button onclick="hozon()">保存</button> 6<button onclick="kesu()">選択削除</button> 7<button onclick="all_delete()">すべて削除する</button> 8<hr> 9<div id="PRINT"> 10 11</div> 12</body>

javascript

1function hozon() { 2var k = document.getElementById("K"); 3var v = document.getElementById("V"); 4 key = k.value.replace(/[\"\'\<\>\{\}\\]/g,""); 5 value = v.value; 6 localStorage.setItem(key, value); 7 yomikomu(); 8} 9function kesu(){ 10var cb = document.getElementsByName("list"); 11 if ( cb[0] != undefined ) { 12 if ( confirm("選択したものを削除します") ) { 13 for ( i = 0; i < cb.length; i++ ) { 14 if ( cb[i].checked ) { 15 localStorage.removeItem( cb[i].getAttribute("key") ); 16 } 17 } 18 yomikomu(); 19 } 20 } 21} 22function yomikomu() { 23var obj = document.getElementById("PRINT"); 24 obj.innerHTML = ""; 25var html = ""; 26 html += "<ul class=\"ulcss\">"; 27 if (localStorage.length != 0) { 28 for ( var i = 0; i < localStorage.length; i++ ) { 29 var key = localStorage.key(i); 30 var value = localStorage.getItem( key ).replace(/[\"\'\<\>\{\}\\]/g,""); 31 var checkbox = "<input type=\"checkbox\" name=\"list\" key=\"" + key + "\">"; 32 html += "<li>" + key + ":" + checkbox + value + "</li>"; 33 } 34 html += "<ul>"; 35 obj.innerHTML = html; 36 } 37} 38function all_delete() { 39 if ( confirm("保存されている値をすべて削除します") ) { 40 localStorage.clear(); 41 } 42 yomikomu(); 43} 44window.onload = function() { 45 yomikomu(); 46}

localstotrage は key と value のセットなので
保存する「名前 key」をつけて「値 value」を保存するようにしてはどうでしょうか
消すときはその「名前」を消すと値が消えます。
消しやすいようにチェックボックス式にしました

投稿2015/09/04 05:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

スレ主のFurisukeさんのコードを実行すると

イメージ説明

になりますが、どのDelボタンが押されても3行全部きえてしまうのが悩みとのことですね。

それに対して、KiKiKi_KiKiさんは、「やることその1」「やることその2」「やることその3」それぞれをdivで囲い、それぞれの行のDelボタンは左にあるtodoだけ(つまりdivで囲った部分だけ)を消すようにするといいですよと言っていますよ。

投稿2015/09/03 09:52

編集2015/09/03 09:54
osmoc-1970

総合スコア124

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

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

0

https://teratail.com/questions/15262
この質問のKiKiKi_KiKiさんの回答が具体的でわかりやすいと思いますが、
例えばHTMLが↓のような状態であれば、
後はdel_txt()で各ToDoのIDを指定してやれば
個別に削除できそうだ、ということはわかりますか?

HTML

1<div id="txt_show"> 2 <div id="todo_1">ToDo1</div> 3 <div id="todo_2">ToDo2</div> 4 <div id="todo_3">ToDo3</div> 5</div>

それがわかればKiKiKi_KiKiさんの回答がわかる気がするのですが。

投稿2015/09/03 09:27

notable

総合スコア415

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

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

退会済みユーザー

退会済みユーザー

2015/09/03 10:49

回答ありがとうございます 書き込まれたものをdivで囲ってやればそのものだけ削除ということはわかるんですが どうやって囲むか、(といいますかどうやって囲んでいるのか)が読んでも理解できません・・・。
notable

2015/09/03 11:27

なるほど。わからないポイントが把握できました。 元の質問のでもコメントされているようですし、 後はKiKiKi_KiKiさんのソースを引用して説明するくらいしかできないので、 元の質問でKiKiKi_KiKiさんの回答を待ったほうが良さそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問