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

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

ただいまの
回答率

88.64%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,474

goombeer

score 16

前提・実現したいこと

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

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MeMo Pad</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="memo.js"></script>
  </head>
  <body>
    <div class="wapper1">
      <textarea rows="8" cols="80" value="" id="title"></textarea>
    </div>
    <div class="wapper2">
      <textarea rows="8" cols="80" value="" id="textarea"></textarea>
    </div>
    <button id="save">Save</button>
    <button id="clear">Clear</button>
    <div class="memoarea">

    </div>

  </body>
</html>
var i = 0;
var storage = localStorage;

$(function(){
//保存の処理
 $("#save").on("click",function(){
   var title = $("#title").val();
   var value = $("#textarea").val();
   if(title && value){
     localStorage.setItem(title,value);
   } else if (title == "" || value == "") {
     alert("入力してください");
     return;
   }
   alert("Saveしました!");
   $("#textarea").val("");
   $("#title").val("");

   //要素の追加
     for (; i < storage.length; i++) {
        var _key = storage.key(i);
        var content = storage.getItem(_key);
        var memo_area =$("<div></div>", {
          width: 300,
          height: 100,
          css: {border: "5px solid gray",hover:"border3 #000 solid"},
          id: "my-div"+i,
        });
        var memo_title =$("<h1></h1>",{
          width: 300,
          height:10,
          css:{backgroundColor:"black"},
          class:"memo_title"+i,
          text:_key,
        })
        var memo_content =$("<p></p>",{
          width: 300,
          height:90,
          css:{backgroundColor:"white"},
          class:"memo_content"+i,
          text:content,
        })

        $(".memoarea").append(memo_area);
        $("#my-div"+i).append(memo_title);
        $("#my-div"+i).append(memo_content);


        //マウスが乗った時の表示
        $(".memoarea").on({
            "mouseenter": function(){$(this).css('background', 'red',"cursor","pointer");
        },
            "mouseleave": function(){$(this).css('background', '',"cursor","");}
        }, "#my-div"+i);

        //削除の処理
        $("#my-div"+i).on("click",function(){
          var h = $(".memo_title"+i).text();
          var p = $(".memo_content"+i).text();
          if (h == memo_title && p == memo_content) {
            localStorage.removeItem(memo_title);
            localStorage.removeItem(_key);
            $(this).remove();
            alert("削除しました!");
            $("#textarea").val("");
          }

        });
 };

 });
});

補足情報(言語/FW/ツール等のバージョンなど)

現在できていること
・入力したメモを画面に表示させることはできています。
・削除はできますが、入力→入力→削除→入力といったように何度か繰り返すと、削除したメモの内容が表示されるなどといったことが起きてしまいます。

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

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/05/14 14:41

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

    キャンセル

  • goombeer

    2017/05/14 14:55

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

    キャンセル

  • kei344

    2017/05/14 15:07

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

    キャンセル

  • goombeer

    2017/05/14 15:12

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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

それと、削除ですが、

var h = $(".memo_title"+i).text();
var p = $(".memo_content"+i).text();
if (h == memo_title && p == memo_content) {

この部分が特に変です。hは文字列で、memo_titleはJQueryのオブジェクトです。
この削除部分のコードは全体的に謎です。
ループ外に出して、削除だけ別に考えて作ってみてください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/14 15:00

    ご指摘、ありがとうございます。
    まだ学習を初めて、2週間も経っていないので、ご容赦いただけると幸いです。
    少し考えてみます。

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/14 16:10

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

    キャンセル

+1

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

var area_option = {
    width: 300,
    height: 100,
    css: { border: "5px solid gray", hover: "border: 3px #000 solid" }
    //id: "my-div" + i,
};
var title_option = {
    width: 300,
    height: 20, /* why 10? */
    css: { backgroundColor: "black", color: "white" }
    // class: "memo_title" + i,
    // text: _key,
};
var content_option = {
    width: 300,
    height: 90,
    // style.css の source がないので hover event 確認のため...
    css: { backgroundColor: "rgba(255, 255, 255, 0)" }
    // css: { backgroundColor: "white" }

    // class: "memo_content" + i,
    // text: content,
};

//
// html element 構築, event の bind.
//
function create_entry(title, content, index) {

    var option = $.extend({
        id: "my-div" + index
    }, area_option);
    var memo = $("<div></div>", option);

    option = $.extend({
        class: "memo_title" + index,
        text: title
    }, title_option);
    var memo_title = $("<h1></h1>", option)

    option = $.extend({
        class: "memo_content" + index,
        text: content
    }, content_option);
    var memo_content = $("<p></p>", option);

    $(".memoarea").append(memo);
    memo.append(memo_title);
    memo.append(memo_content);

    //マウスが乗った時の表示
    var selector = "#my-div" + index;
    $(".memoarea").on({
        "mouseenter": function () {
            $(this).css({ 'background': 'red', "cursor": "pointer" });
        },
        "mouseleave": function () {
            $(this).css({ 'background': '', "cursor": "" });
        }
    }, selector);

    //削除の処理
    memo.on("click", function (e) {
        console.log(e);
        var title = $(".memo_title" + index).text();
        if (title) {
            localStorage.removeItem(title);
            // event の unbind
            $(".memoarea").off("mouseenter mouseleave", selector);
            $(this).remove();
            alert("削除しました!");
            $("#textarea").val("");
        }
    });
}

function load_recently_memo() {
    for (var i = 0; i < localStorage.length; i++) {
        var _key = localStorage.key(i);
        var content = localStorage.getItem(_key);
        create_entry(_key, content, i);
    }
}

function duplicate_check(key) {
    // illegal access?
    // for (var i in localStorage) {
    //     console.log("i=%s, value=%o", i, localStorage[i]);
    // }
    for (var i = 0; i < localStorage.length; i++) {
        var _key = localStorage.key(i);
        if (_key === key)
            return true;
    }
    return false;
}

$(function () {
    // 保存されているmemoを表示
    load_recently_memo();

    //保存の処理
    $("#save").on("click", function () {
        var title = $("#title").val();
        var value = $("#textarea").val();
        if (title && value) {
            if (duplicate_check(title)) {
                alert("title が重複しています");
                return;
            } else {
                localStorage.setItem(title, value);
                create_entry(title, value, localStorage.length);
            }
        } else if (title == "" || value == "") {
            alert("入力してください");
            return;
        }

        alert("Saveしました!");
        $("#textarea").val("");
        $("#title").val("");
    });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/14 16:11

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

    キャンセル

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

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

関連した質問

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