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

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

ただいまの
回答率

90.35%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,540

Furisuke

score 101

簡単なメモアプリを作っているのですが問題点があって困っています。
テキストボックスに書き込んだものをボタンを押したら表示して保存というところまではできたのですが削除がうまくいかないのです。
任意のものを消したいのに書き込んだものすべて消えてしまいます。
//Text削除関連
function delMemo(){
    document.getElementById('show').innerHTML = "";
}
の部分でshowという風にひとくくりで消しているからすべて消えているということは理解できたのですがどうすれば任意のものだけを消せるかがわかりません
コードと解説をお願いします
JavaScriptを始めたばかりなのでなるべく噛み砕いて説明していただけると幸いです

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h1>ToDoMemo</h1>
<input type="text" placeholder="AddMemoText" id="txt">
<!--ボタンが押されたらaddMemo()へ-->
<input type="button" value="Add" onclick="addMemo();">
<div id="show"></div>
<script>
//Text書き込み関連
function addMemo(){
  var txt = document.getElementById('txt').value;
  var show = document.getElementById('show').innerHTML;
  if(show != ""){
    show += "<br>";
  }
  document.getElementById('show').innerHTML = show + txt + "<input type='button' value='Del' onclick='delMemo();'>";
  save();
}

//Text削除関連
function delMemo(){
    document.getElementById('show').innerHTML = "";
}
//load
window.onload = function(){
  var show_txt = localStorage.getItem('txt');
  document.getElementById('show').innerHTML = show_txt;
}
//save
function save(){
  localStorage.setItem('txt', document.getElementById('show').innerHTML);
}

</script>
</body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

<script>
// 追加
var count = 0;

//Text書き込み関連
function addMemo(){
  var txt = document.getElementById('txt').value;
  var show = document.getElementById('show').innerHTML;
/*削除  
if(show != ""){
    show += "<br>";
  }
*/
  // 変更
  document.getElementById('show').innerHTML = show + "<div id='id" + count + "'>" + txt + "<input type='button' value='Del' onclick='delMemo(`id" + count + "`);'></div>";
  // 追加
  count++;
  save();
}

//Text削除関連
function delMemo(id){
    var sel = document.getElementById(id);
    // 追加
    sel.parentNode.removeChild(sel);
    // 削除
    //document.getElementById('show').innerHTML = "";
}
// 以下略
これで個別削除できます

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/01 16: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);

    }

    キャンセル

  • 2015/11/01 17: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 10:47

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

    キャンセル

  • 2015/11/04 14:35

    >sel.parentNode.removeChild(sel);
    >なのですがどういった意味なのでしょうか?
    >sel.parentNodeという親ノードのselを削除と言った意味でしょうか?

    はい、今回だと
    文章にすると、回りくどい感じですが
    sel(自分)の親ノードから子ノードのsel(自分)を削除するという意味です

    キャンセル

0

localstorageを使う場合は キーに対して値を保存します。
メモ1=>あれこれ
メモ2=>どれどれ
localStorage.setItem("メモ1", "あれこれ")
//ほぞん
localStorage.setItem(key, value)
//key の値をとりだす
v = localStorage.getItem(key)
//key の値をさくじょ
localStorage.removeItem(key)
1つのキーに全部入れるんじゃなくて
1個ずつ入れて取り出した値をDOMで表示追加削除したらどうでしょうか

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る