JavaScriptのinnerHTMLで書き込んだものを削除したい

簡単なメモアプリを作っているのですが問題点があって困っています。
テキストボックスに書き込んだものをボタンを押したら表示して保存というところまではできたのですが削除がうまくいかないのです。
任意のものを消したいのに書き込んだものすべて消えてしまいます。

JavaScript
1//Text削除関連
2function delMemo(){
3    document.getElementById('show').innerHTML = "";
4}

の部分でshowという風にひとくくりで消しているからすべて消えているということは理解できたのですがどうすれば任意のものだけを消せるかがわかりません
コードと解説をお願いします
JavaScriptを始めたばかりなのでなるべく噛み砕いて説明していただけると幸いです

JavaScirpt
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title></title>
6</head>
7<body>
8<h1>ToDoMemo</h1>
9<input type="text" placeholder="AddMemoText" id="txt">
10<!--ボタンが押されたらaddMemo()へ-->
11<input type="button" value="Add" onclick="addMemo();">
12<div id="show"></div>
13<script>
14//Text書き込み関連
15function addMemo(){
16  var txt = document.getElementById('txt').value;
17  var show = document.getElementById('show').innerHTML;
18  if(show != ""){
19    show += "<br>";
20  }
21  document.getElementById('show').innerHTML = show + txt + "<input type='button' value='Del' onclick='delMemo();'>";
22  save();
23}
24
25//Text削除関連
26function delMemo(){
27    document.getElementById('show').innerHTML = "";
28}
29//load
30window.onload = function(){
31  var show_txt = localStorage.getItem('txt');
32  document.getElementById('show').innerHTML = show_txt;
33}
34//save
35function save(){
36  localStorage.setItem('txt', document.getElementById('show').innerHTML);
37}
38
39</script>
40</body>
41
42</html>

行動規範の内容に同意します

回答2件

localstorageを使う場合はキーに対して値を保存します。
メモ１＝＞あれこれ
メモ２＝＞どれどれ
localStorage.setItem("メモ１", "あれこれ")

javascript
1//ほぞん
2localStorage.setItem(key, value)
3//key の値をとりだす
4v = localStorage.getItem(key)
5//key の値をさくじょ
6localStorage.removeItem(key)

１つのキーに全部入れるんじゃなくて
１個ずつ入れて取り出した値をＤＯＭで表示追加削除したらどうでしょうか

投稿2015/11/01 05:51

退会済みユーザー

総合スコア0

ベストアンサー

javascript
1<script>
2// 追加
3var count = 0;
4
5//Text書き込み関連
6function addMemo(){
7  var txt = document.getElementById('txt').value;
8  var show = document.getElementById('show').innerHTML;
9/*削除  
10if(show != ""){
11    show += "<br>";
12  }
13*/
14  // 変更
15  document.getElementById('show').innerHTML = show + "<div id='id" + count + "'>" + txt + "<input type='button' value='Del' onclick='delMemo(`id" + count + "`);'></div>";
16  // 追加
17  count++;
18  save();
19}
20
21//Text削除関連
22function delMemo(id){
23	var sel = document.getElementById(id);
24	// 追加
25	sel.parentNode.removeChild(sel);
26	// 削除
27    //document.getElementById('show').innerHTML = "";
28}
29// 以下略

これで個別削除できます

追加する部分をID付きのdivタグで囲む
onclick=delMemo()で、そのIDを渡す
delMemoでは渡されたIDから要素を取得し、その親要素からIDの要素を削除する
divで囲んでいるのでbr追加部分は削除(残してもよいが消せないので)

ちなみにロード/セーブでcountもロード/セーブしないと
挙動がおかしくなると思います

投稿2015/11/01 04:42

shaha

総合スコア166

退会済みユーザー

2015/11/01 07:24

ご回答ありがとうございますエラーが出たのでまた質問させてください・・・。 function delMemo(){ var sel = document.getElementById(id); sel.parentNode.removeChild(sel); } の部分ですが(id)にエラーが出たので('id')にしました。これでエラーは消えたのですが問題はないでしょうか？それとUncaught TypeError: Cannot read property 'parentNode' of null といったエラーメッセージも出ています・・・。最後にちなみにロード/セーブでcountもロード/セーブしないと挙動がおかしくなると思いますとのことですが書き方がわからなくて悩んでいます以下の通りで大丈夫でしょうか？ //load window.onload = function(){ var show_txt = localStorage.getItem('txt'); document.getElementById('show').innerHTML = show_txt; var id_count = localStorage.getItem('count'); document.getElementById('id').innerHTML = id_count; } //save function save(){ localStorage.setItem('txt', document.getElementById('show').innerHTML); localStorage.setItem('count', document.getElementById('id').innerHTML); }

shaha

2015/11/01 08:11

function delMemo(){ var sel = document.getElementById(id); sel.parentNode.removeChild(sel); } の部分ですが、おそらく function delMemo(id){ となっていない為、IDを受け取れていないからです id→'id'でエラーで消えたのはidという変数から idという文字列に認識変わった為です addMemoやdelMemoは、私のソースのコピペで問題無いですロード/セーブはinnerHTMLでは無くcountそのものですロード count = localStorage.getItem('count'); セーブ localStorage.setItem('count ', count ); count は、データベースでいうオートインクリメントみたいな役割を持たせているので（今回はオートじゃないですが） count の数値、そのものが必要になります

退会済みユーザー

2015/11/04 01:47

返信遅れて申し訳ありません＞＜無事にできました！！ありがとうございます！ sel.parentNode.removeChild(sel); なのですがどういった意味なのでしょうか？ sel.parentNodeという親ノードのselを削除と言った意味でしょうか？

shaha

2015/11/04 05:35

>sel.parentNode.removeChild(sel); >なのですがどういった意味なのでしょうか？ >sel.parentNodeという親ノードのselを削除と言った意味でしょうか？はい、今回だと文章にすると、回りくどい感じですが sel(自分)の親ノードから子ノードのsel(自分)を削除するという意味です

行動規範の内容に同意します

あなたの回答