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

締切済

質問者：DreamyLife_615
質問日時：2014/08/08 13:21
回答数：1件

以下のコードなのですが現在地を取得してリスト化して保存するというものです
追加された<a>の横に削除ボタン(del_btn)を設置し、押されたらリストを削除をいう風にしたいのですが
どうしてもできません
コードの下部の
//削除ボタンが押されたとき
の部分の正しい記述がわかりません
ご教授お願いします
<!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">
</head>
<body bgcolor="#C2F2A5">
<center>
<font face="HG創英角ポップ体">
<h1>ブックマークMAP</h1>

</center>
<div id="new_div">
<span id="name">場所：<input id="name_txt" type="text" value="" size="20" /><br /></span>
</font>
<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;
$("del_btn").onclick = del_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("\t");
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+"<input id='del_btn' type='button' value='削除'>"+"</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 = "記録";
}

//削除ボタンが押されたとき
function del_btn_clickHandler(){
delete "<'a'>";
}

</script>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2014/08/08 16:19

ざっと見ただけなので、全体をちゃんと把握してませんが…

＞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);
}
のような要領で、ご希望の動作になると思います。

この回答への補足

>id="delbtn"
→class="del_btn"

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

補足日時：2014/08/08 16:41

通報する