• 締切済み

JSでのタグの削除方法について

fujillinの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ざっと見ただけなので、全体をちゃんと把握してませんが… ＞html += "<li>"+link+"<input id='del_btn' type='button' value='削除'>"+"</li>"; だと id="del_btn" の要素が複数生成されてしまいますが、HTML文法違反になります。 class設定などを利用するか、個別にイベントを設定するかなどにしてください。 その結果、 ＞$("del_btn").onclick = del_btn_clickHandler; のイベント設定も不適切になっています。 （save_btnのほうは一つでしょうから、このままでＯＫです） 削除の処理に関しては、クリックされた要素の親要素（LI要素）を削除するという内容にしておけば宜しいかと思います。 個別にイベントを設定する場合、onclickなどだとイベントハンドラにイベントオブジェクトが渡されないブラウザがありますので、 　onclick="del_btn_clickHandler(this)" 　onclick="del_btn_clickHandler(event)" などとしてハンドラ側で引数として取得できるようにしておくのがよさそうです。 addEventListnerなどを用いて設定すれば、第一引数にイベントオブジェクトが渡されます。 function del_btn_clickHandler(elm){ //elmにクリック時の要素が渡されると仮定すると 　while(elm && elm.nodeName != "LI") elm = elm.parentNode; 　if(elm) elm.parentNode.removeChild(elm); } のような要領で、ご希望の動作になると思います。

DreamyLife_615
質問者

補足

>id="delbtn" →class="del_btn" >$("del_btn").onclick = del_btn_clickHandler; →onclick="del_btn_clickHandler(this)" 　onclick="del_btn_clickHandler(event)" に変更して残りの部分を書き加えるということでよろしいでしょうか？

この回答がついた質問に戻る
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptのGPSについて

    現在地の名前を入力し、GoogleMapで表示してその地図を保存するというものを作ったのですが 以下のコードで現在地を取得するとなぜかiPhoneでもAndroidでもバルセロナが表示されます なぜなのでしょうか？ 開発環境はMonacaです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <h1>ブックマークMAP</h1> <div id="new_div"> 店名：<input id="name_txt" type="text" value="" size="20" /><br /> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\n"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } </script> </body> </html>

  • JSの保存ダイアログについて

    以下のコードは簡易メモ的なものです そこに書き込まれた内容を保存できるようにしたいのですがfunction dl()には何を書けばいいのでしょうか？ 調べてみて function dl(C:\){ var a = document.createElement('a'); a.href = C:\; a.setAttribute('dl', name || 'noname'); a.dispatchEvent(new CustomEvent('click')); } としてみたのですがこれを書き込むと保存ダイアログはおろかtextの保存もできなくなってしまいます <input type="text" id="title"><br><br> <textarea id="memo" rows="8" cols="50"></textarea><br><br> <input type = "button" value="SAVE" onclick="dl();"> <script> var title = document.getElementById("title"); var memo = document.getElementById("memo"); window.onload = function() { var body_title = localStorage.getItem("title"); if (body_title != null) title.value = body_title; var body_memo = localStorage.getItem("memo"); if (body_memo != null) memo.value = body_memo; } title.onchange = function() { localStorage.setItem("title",title.value); } memo.onchange = function() { localStorage.setItem("memo",memo.value); } function dl(){ } </script>

  • JSのコードで保存ができません

    以下のコードなのですがnameの部分だけ保存ができません なぜなのでしょうか <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name1="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <table border="3" align="center" style=border-spacing:0px;> <tr> <th width="20" height="30">Day</th> <th width="80">name</th> <th width="70">in</th> <th width="100">out</th> <th width="100">total</th> </tr> <tr> <th><input type="text" id="day" style="width : 30px; height : 20px;"></th> <td><input type="text" id="name" style="width : 80px; height : 20px;"></td> <td><input type="text" id="in_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="out_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="total" style="width : 50px; height : 20px;"></td> </tr> </table> <script> //保存関係 var day = document.getElementById("day"); var name = document.getElementById("name"); var in_m = document.getElementById("in_m"); var out_m = document.getElementById("out_m"); var total = document.getElementById("total"); window.onload = function() { var body_day = localStorage.getItem("day"); var body_name = localStorage.getItem("name"); var body_in_m = localStorage.getItem("in_m"); var body_out_m = localStorage.getItem("out_m"); var body_total = localStorage.getItem("total"); if (body_day != null) day.value = body_day; if (body_name != null) name.value = body_name; if (body_in_m != null) in_m.value = body_in_m; if (body_out_m != null) out_m.value = body_out_m; if (body_total != null) total.value = body_total; } day.onchange = function() { localStorage.setItem("day",day.value); } name.onchange = function() { localStorage.setItem("name",name.value); } in_m.onchange = function() { localStorage.setItem("in_m",in_m.value); } out_m.onchange = function() { localStorage.setItem("out_m",out_m.value); } total.onchange = function() { localStorage.setItem("total",total.value); } </script> </body> </html>

  • JavaScriptについて

    以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものです なぜか追加ボタンを押しても反応がありません なぜでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1> <!--新規追加ボックス--> <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div> <!--項目一覧--> <div id = "items_div"></div> <!--項目の操作パネル--> <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

  • jQueryが反映されません＞＜

    jQueryとJavaScriptでToDoメモを作っています 下記のコードなのですが 削除ボタンが表示されないのとToDoリストがおかしな位置に来ます どうすればいいのでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet"type="text/css"href="css/style.css"> <script> monaca.viewport({width: 340}); 　　　　document.addEventListener("deviceready",onDeviceReady,false); function onDeviceReady() { document.addEventListener("backbutton", onBkbtn, false); } function onBkbtn() { location.href = "index.html"; } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>CheckList</h1> </div> </center> <!--新規追加ボックス--> <center> <div id="new_div"> <input id="new_txt" type="text" value="" placeholder="ToDoを書き込んでください" style="width:270px" size="40"/> </center> <br> <div data-role="button" data-icon="plus" id="add_btn">追加</div> </div> <!--項目一覧--> <div id="items_div"></div> <div id="control_div"> <div data-role="button" data-icon="delete" id="done_btn">削除</div> </div> </div> <!--Android1.6対策--> <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input"); cb.className = "large"; //CSSに対応させる cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span"); label.innerHTML = memo; var line = document.createElement("div"); line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

  • タグで、submitさせる方法について

    こんばんは。いつもお世話になります。 input type='submit'を、画像を使ってロールオーバーで実行したいのですが、 うまくいきません。１）は、ＯＫです。２）と３）は、ダメでした。 １）にある、name='delete_msg'　が重要な鍵ですが、 それをJavaScriptでどう扱えば良いのかわかりません。 ３）の<div id='delete' ..... onclick='javascript:....'>Delete</div>で実行させる場合、 function pmDelete()にどう書けば良いのか教えてください。 よろしくお願いします。 ------（例：ここから）----------------------------- <html><head> <script type='text/javascript'> function pmDelete(){ document.mSg.submit(); } </script> <style type='text/css'> div#delete { float: left; background-image: url(page_up.gif); text-indent: -1000em; overflow: hidden; cursor: pointer; } div#delete:active { background-position: 0 -20px; } </style> </head> <body> <form name='mSg' id='mSg' action='index.php' method='post'> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />111<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />222<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />333<br /> １）<input type='submit' name='delete_msg' value='Delete' /><br /> ２）<input type='submit' value='Delete' /><br /> ３）<div id='delete' name='delete' onclick='javascript:pmDelete();'>Delete</div> </form></body></html> ------（例：ここまで）-----------------------------

  • jQueryのclickイベントハンドラ

    最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。

  • JavaScriptでのcheckbox作成

    JavaScriptのcheckbox作成について教えてください 突然のリクエスト申し訳ございません お時間があればご回答お願いします ToDoメモを作っておりまして、仕様としては input type="text"に文字を書き込んで追加ボタンを押せばtextboxの下に 書き込まれた内容がリストのような形で表示されます そのリストの横にチェックボックスをつけてチェックして削除ボタンを押すと削除できるという仕組みです ですがチェックボックスのサイズが小さいです どうすればサイズを大きくできるのでしょうか？ JavaScriptでcheckboxを作成するコードは下記の通りです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); // // TODO: Please edit your JavaScript code here // </script> <style> h1 { color : #4795F4; } </style> </head> <body background="img/st18.png"> <center><h1>ToDoメモ</h1> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> </center> <!--新規追加ボックス--> <center><div id="new_div"> <input id="new_txt" type="text" value="" style="width:270px" size="40"/></center> <br><img src="img/blmenu.gif" width="50" height="25" id="add_btn" /> </div> <!--項目一覧--> <div id="items_div"></div> <!--項目の操作パネル--> <div id="control_div"> <img src="img/blmenu.gif" width="50" height="25" id="done_btn"/> </div> <!--Android1.6対策--> <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

  • JavaScript　オンマウスで画像切り替え、テキスト切り替え

    javascriptで困っています。 あるテキストに一回のオンマウスで、 idを持った箇所の画像を切り替え、 また別のidをもった箇所にテキストを表示させたいのですがうまくいきません。 今までのコードはこちらです。 script -------------- function swap(n) { var items = [ { TextA:"あああ", ImageB:"../../common/logo.gif"}, { TextA:"２２２", ImageB:"../../common/logo.gif"}, { TextA:"３３３", ImageB:"../../common/logo.gif"} ]; var o = document.getElementById("Main"); $("Txt").innerText = items[n].TextA; $("Photo").src = items[n].ImageB; } html ---------- <div id="Main"> <img src="../logo.gif" alt="" name="Photo" width="120" height="60" id="Photo"> <div id="Txt" name="Txt">最初</div> </div> <A href="#" onmouseover="swap(0)">１</A><br> <A href="#" onmouseover="swap(1)">２</A><br> <A href="#" onmouseover="swap(2)">３</A> 詳しい方、どうぞご教授よろしくお願い致します。

  • localStorageでのcheckbox制御

    下記サイトを参考に、テキストボックスとチェックボックスをlocalStorageに保存するプログラムを作ってみました。 http://jsdo.it/twi_masa/hx8D 質問ですが、チェックやテキストを書いて保存ボタンを押すとlocalStorageに値が保存されることはchromeのデベロッパーツールで確認しました。 値がある状態でロードを押すとその保存された状態に復元されますが、それをロードボタンを押さずにページが読み込まれた直後に表示させる方法が知りたいです。 window.onload = function(){ 処理 } だと思い、 load : functionをwindow.onload = functionへ単純に変更しましたが、それでは保存もロード出来なくなってしまいました。 自分では全く書けないので、出来ましたらソースを書いていただけるとありがたいです。 よろしくお願いします。 <table> <tr> <td>テキスト</td> <td><input type="text" id="text1" /></td> </tr> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <input type="button" value="ロード" onclick="hx8D.load();" /> <script> var hx8D = function(){ var HX8D = function(){}; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; } } }, load : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ elements[i].value = localStorage[key]; }else if(type == "checkbox"){ elements[i].checked = localStorage[key] == "true" ? true : false; } } }, }; return new HX8D(); }(); </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する