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

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

ただいまの
回答率

90.49%

  • JavaScript

    16957questions

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

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

受付中

回答 3

投稿

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

Furisuke

score 93

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

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

</head>
<body>
  <!--MEMO追加フォーム-->
  <input type="text" id="text" placeholder="TextValue">
  <input type="button" value="Add" onclick="add_txt();">
  <!--MEMO表示-->
  <div id="txt_show"></div>
<script >
  //MEMO追加関数
  function add_txt(){
    var text = document.getElementById('text').value;
    var txt_show = document.getElementById('txt_show').innerHTML;
    if(txt_show != ""){
      txt_show += "<br>";
    }
    document.getElementById('txt_show').innerHTML = txt_show + text + "<input type='button' value='Del' onclick='del_txt();'>";
  }

  //MEMO削除関数
  function del_txt(){
    document.getElementById('txt_show').innerHTML = "";
  }

  //セーブ&ロード
</script>

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/03 19:49

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

    キャンセル

  • 2015/09/03 20:27

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

    キャンセル

0

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

<script type="text/javascript" src="15636.js"></script>
</head>
<body>
KEY<input type="text" id="K"> => VALUE<input type"text" id="V">
<button onclick="hozon()">保存</button>
<button onclick="kesu()">選択削除</button>
<button onclick="all_delete()">すべて削除する</button>
<hr>
<div id="PRINT">

</div>
</body>

function hozon() {
var k = document.getElementById("K");
var v = document.getElementById("V");
    key = k.value.replace(/[\"\'\<\>\{\}\\]/g,"");
    value = v.value;
    localStorage.setItem(key, value);
    yomikomu();
}
function kesu(){
var cb = document.getElementsByName("list");
    if ( cb[0] != undefined ) {
        if ( confirm("選択したものを削除します") ) {
            for ( i = 0; i < cb.length; i++ ) {
                if ( cb[i].checked ) {
                    localStorage.removeItem( cb[i].getAttribute("key") );
                }
            }
            yomikomu();
        }
    }
}
function yomikomu() {
var obj = document.getElementById("PRINT");
    obj.innerHTML = "";
var html = "";
    html += "<ul class=\"ulcss\">";
    if (localStorage.length != 0) {
        for ( var i = 0; i < localStorage.length; i++ ) {
            var key = localStorage.key(i);
            var value = localStorage.getItem( key ).replace(/[\"\'\<\>\{\}\\]/g,"");
            var checkbox = "<input type=\"checkbox\" name=\"list\" key=\"" + key + "\">";
            html += "<li>" + key + ":" + checkbox + value + "</li>";
        }
        html += "<ul>";
        obj.innerHTML = html;
    }
}
function all_delete() {
    if ( confirm("保存されている値をすべて削除します") ) {
        localStorage.clear();
    }
    yomikomu();
}
window.onload = function() {
    yomikomu();
}
localstotrage は key と value のセットなので
保存する「名前 key」をつけて「値 value」を保存するようにしてはどうでしょうか
消すときはその「名前」を消すと値が消えます。
消しやすいようにチェックボックス式にしました

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 受付中

    JavaScriptのfunctionについて

    以下のようにコードを書くと ボタンを押せば「Hello World」が表示されますがbuttonが消えてしまいます このHello Worldをbuttonの下に表示するようにする

  • 受付中

    「押す」ボタンをクリックすることで四角内の文字で「出力」を上書きしたい

    閲覧ありがとうございます。 表題の通りなのですが、どうも反応してくれません。 どこがダメなのか教えてください。 よろしくお願いいたします。 <!doctype html> <

  • 解決済

    作成したボタンの値をテキストボックスへ出力方法

    作成したボタン(HTML)押下後、テキストボックスへ出力するにはどのようにすればよいでしょうか? このテキストボックスは ・暗証番号機能(数値のみ) ・4桁の入力制限 以上で

  • 受付中

    innerHTMLの追加と削除

    こんにちは 現在JSでToDoメモのようなものを作ろうと思っているのですが 問題点が2つ出てきました。 1、innerHTMLにtextに書き込まれた内容を書き込めるが追加ができな

  • 受付中

    JSのテキスト保存について

    下記のコードはテキストボックスに書かれた文字をinnerHTMLで書き出しそれを更新しても消えない、保存するというプログラムです。 ですが肝心の保存ができません なぜでしょうか?

  • 受付中

    JavaScriptのlocalstorage

    下記のコードは収支を計算するコードです もとのお金を入力し、ボタンを押せばその日の収入を入力して計算し結果を表示して保存するというコードなのですが保存ができません どうすればできま

  • 受付中

    JSのToDoメモ制作について

    以下のコードはJavaScriptのToDoメモです。 書き込んだ内容を追加、保存はうまくいったのですが削除がうまくいきません。削除ボタンを押すとすべて消えてしまいます。 どうすれ

  • 解決済

    JavaScriptでの計算

    定価360円の商品を購入するときその個数が1~9なら定価販売 10~19の時なら全体から5%割引 20~なら10%割引にしたいのですがすべて定価になってしまいます どうすればいいの

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

  • JavaScript

    16957questions

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