画面に表示させた文字と同じ文字をlocalstorageから削除したい

###前提・実現したいこと
現在、メモ帳を作成しているところです。
考えている仕様としては、タイトル・内容をlocalstorageに保存できるものを作成したいと考えています。
入力したメモを画面に表示させ、表示させたものを選択したら画面・localstorageからも削除したいと考えています。

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>MeMo Pad</title>
6    <link rel="stylesheet" href="style.css">
7    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
8    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
9    <script src="memo.js"></script>
10  </head>
11  <body>
12    <div class="wapper1">
13      <textarea rows="8" cols="80" value="" id="title"></textarea>
14    </div>
15    <div class="wapper2">
16      <textarea rows="8" cols="80" value="" id="textarea"></textarea>
17    </div>
18    <button id="save">Save</button>
19    <button id="clear">Clear</button>
20    <div class="memoarea">
21
22    </div>
23
24  </body>
25</html>
26

javascript
1var i = 0;
2var storage = localStorage;
3
4$(function(){
5//保存の処理
6 $("#save").on("click",function(){
7   var title = $("#title").val();
8   var value = $("#textarea").val();
9   if(title && value){
10     localStorage.setItem(title,value);
11   } else if (title == "" || value == "") {
12     alert("入力してください");
13     return;
14   }
15   alert("Saveしました！");
16   $("#textarea").val("");
17   $("#title").val("");
18
19   //要素の追加
20     for (; i < storage.length; i++) {
21        var _key = storage.key(i);
22        var content = storage.getItem(_key);
23        var memo_area =$("<div></div>", {
24          width: 300,
25          height: 100,
26          css: {border: "5px solid gray",hover:"border3 #000 solid"},
27          id: "my-div"+i,
28        });
29        var memo_title =$("<h1></h1>",{
30          width: 300,
31          height:10,
32          css:{backgroundColor:"black"},
33          class:"memo_title"+i,
34          text:_key,
35        })
36        var memo_content =$("<p></p>",{
37          width: 300,
38          height:90,
39          css:{backgroundColor:"white"},
40          class:"memo_content"+i,
41          text:content,
42        })
43
44        $(".memoarea").append(memo_area);
45        $("#my-div"+i).append(memo_title);
46        $("#my-div"+i).append(memo_content);
47
48
49        //マウスが乗った時の表示
50        $(".memoarea").on({
51            "mouseenter": function(){$(this).css('background', 'red',"cursor","pointer");
52        },
53            "mouseleave": function(){$(this).css('background', '',"cursor","");}
54        }, "#my-div"+i);
55
56        //削除の処理
57        $("#my-div"+i).on("click",function(){
58          var h = $(".memo_title"+i).text();
59          var p = $(".memo_content"+i).text();
60          if (h == memo_title && p == memo_content) {
61            localStorage.removeItem(memo_title);
62            localStorage.removeItem(_key);
63            $(this).remove();
64            alert("削除しました！");
65            $("#textarea").val("");
66          }
67
68        });
69 };
70
71 });
72});
73

###補足情報(言語/FW/ツール等のバージョンなど)
現在できていること
・入力したメモを画面に表示させることはできています。
・削除はできますが、入力→入力→削除→入力といったように何度か繰り返すと、削除したメモの内容が表示されるなどといったことが起きてしまいます。

実現したいこと
・画面に表示させたメモの内容を、同じ内容をlocalstorageから削除させたい。
・リロードを行った後でも、localstorageに保存されているものを画面に表示させたい

初心者なのでコードがめちゃくちゃだと思いますが、どうぞよろしくお願いいたします。

kei344

2017/05/14 05:41

「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

goombeer

2017/05/14 05:55

失礼いたしました。①「何をした時」→動的に追加したdivタグをクリックした時に、②クリックしたdivタグの子要素のテキストとlocalstorageに入力された内容が同じなら消去させると考えたが、③削除されない。エラーなどは出ていないが、該当箇所の記述（ if (h == memo_title && p == memo_content) {・}に処理が走っていないので,その部分に問題があると思うのですが、どこに問題があるのでしょうか。

kei344

2017/05/14 06:07

この「質問への追記・修正、ベストアンサー選択の依頼」の部分はデフォルトで表示されませんので、質問タイトルおよび本文を編集することをお勧めします。

goombeer

2017/05/14 06:12

ご丁寧にありがとうございます。

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

回答3件

とりあえず仕様を満たすなら、こんな感じでしょうか

javascript
1var area_option = {
2    width: 300,
3    height: 100,
4    css: { border: "5px solid gray", hover: "border: 3px #000 solid" }
5    //id: "my-div" + i,
6};
7var title_option = {
8    width: 300,
9    height: 20, /* why 10? */
10    css: { backgroundColor: "black", color: "white" }
11    // class: "memo_title" + i,
12    // text: _key,
13};
14var content_option = {
15    width: 300,
16    height: 90,
17    // style.css の source がないので hover event 確認のため...
18    css: { backgroundColor: "rgba(255, 255, 255, 0)" }
19    // css: { backgroundColor: "white" }
20
21    // class: "memo_content" + i,
22    // text: content,
23};
24
25//
26// html element 構築, event の bind.
27//
28function create_entry(title, content, index) {
29
30    var option = $.extend({
31        id: "my-div" + index
32    }, area_option);
33    var memo = $("<div></div>", option);
34
35    option = $.extend({
36        class: "memo_title" + index,
37        text: title
38    }, title_option);
39    var memo_title = $("<h1></h1>", option)
40
41    option = $.extend({
42        class: "memo_content" + index,
43        text: content
44    }, content_option);
45    var memo_content = $("<p></p>", option);
46
47    $(".memoarea").append(memo);
48    memo.append(memo_title);
49    memo.append(memo_content);
50
51    //マウスが乗った時の表示
52    var selector = "#my-div" + index;
53    $(".memoarea").on({
54        "mouseenter": function () {
55            $(this).css({ 'background': 'red', "cursor": "pointer" });
56        },
57        "mouseleave": function () {
58            $(this).css({ 'background': '', "cursor": "" });
59        }
60    }, selector);
61
62    //削除の処理
63    memo.on("click", function (e) {
64        console.log(e);
65        var title = $(".memo_title" + index).text();
66        if (title) {
67            localStorage.removeItem(title);
68            // event の unbind
69            $(".memoarea").off("mouseenter mouseleave", selector);
70            $(this).remove();
71            alert("削除しました！");
72            $("#textarea").val("");
73        }
74    });
75}
76
77function load_recently_memo() {
78    for (var i = 0; i < localStorage.length; i++) {
79        var _key = localStorage.key(i);
80        var content = localStorage.getItem(_key);
81        create_entry(_key, content, i);
82    }
83}
84
85function duplicate_check(key) {
86    // illegal access?
87    // for (var i in localStorage) {
88    //     console.log("i=%s, value=%o", i, localStorage[i]);
89    // }
90    for (var i = 0; i < localStorage.length; i++) {
91        var _key = localStorage.key(i);
92        if (_key === key)
93            return true;
94    }
95    return false;
96}
97
98$(function () {
99    // 保存されているmemoを表示
100    load_recently_memo();
101
102    //保存の処理
103    $("#save").on("click", function () {
104        var title = $("#title").val();
105        var value = $("#textarea").val();
106        if (title && value) {
107            if (duplicate_check(title)) {
108                alert("title が重複しています");
109                return;
110            } else {
111                localStorage.setItem(title, value);
112                create_entry(title, value, localStorage.length);
113            }
114        } else if (title == "" || value == "") {
115            alert("入力してください");
116            return;
117        }
118
119        alert("Saveしました！");
120        $("#textarea").val("");
121        $("#title").val("");
122    });
123});
124

投稿2017/05/14 07:03

hirotom

総合スコア14

goombeer

2017/05/14 07:11

hirotomさんありがとうございます。汚いコードにも関わらず、見ていただきありがとうございます。

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

下記質問で私がした回答がだいたい要件を満たしているかと思います。

【JavaScript - 数字が一つずつ上がっていく以外には内容が同じコードのまとめ方。(75962)｜teratail】
https://teratail.com/questions/75962

投稿2017/05/14 06:52

kei344

総合スコア69407

goombeer

2017/05/14 07:10

kei344さんありがとうございます。参考にさせていただきます。

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

ベストアンサー

本当にめちゃくちゃだ（笑）削除できないし。

まず、追加しないとlocalStorageから読み出せない仕様をどうにかしないと。
localStorageを読み込んで、要素を追加する部分だけ切り出して、別functionにして、
$(function(){の時と、saveがクリックされて追加されたときに呼び出すようにしたらどうですか？

それと、削除ですが、

javascript
1var h = $(".memo_title"+i).text();
2var p = $(".memo_content"+i).text();
3if (h == memo_title && p == memo_content) {
4```この部分が特に変です。hは文字列で、memo_titleはJQueryのオブジェクトです。
5この削除部分のコードは全体的に謎です。
6ループ外に出して、削除だけ別に考えて作ってみてください。