【Ajax・DOM】配下のliノードを全て削除し、ＤＢを更新する

【今回の紹介】

ＤＯＭを使用し、対象の全ての配下ノードを削除し、ＤＢへの更新処理を行う

ということを紹介します。

より具体的には、ulタグ配下の指定のリストを全て削除するという処理です。

※先日作ったWebtodoリストの機能を一部実装したものを

　少し整理したものです。

　興味がある方はこちら

　→Webtodoリスト
　
　

【処理の流れ】

①リスト名（h1要素）のイベントを拾う

②対象のh1からulとliのオブジェクトを取得

③すべてのliのIDし、配列に格納

④画面上からli要素を削除

⑤③の配列をカンマ区切りの文字列に分解

⑤④をDBの削除処理を行うphpにPOSTする

ざっくりなどこのような流れです。

【メモ】

①一度配列に格納してからカンマ区切りに分解する意味
　
　最初からカンマ区切りでいいではないか
　
　→for文を回すときに条件分岐（一回目だったらとか最後ならカンマつけないとか）

とか面倒な気がしました。

②配列の要素を繋いで一つの文字列にできる
　
　今回は配列の要素をカンマ区切りにして結合しましたが、
　
　行ったカンマ以外でも「と」とかいろいろできるみたいです。
　
　便利です。
　
③すべての子ノードを削除する処理
以下のサイトを参考に削除処理を実装しました。
参考にしたサンプル


【参考ソース】

<!--カテゴリー名（todo or doing or done）をダブルクリックすると配下の全リストを削除する処理-->
function allDel_li(obj){
	var allDel_ul=obj.nextSibling.nextSibling;
	var allDel_li=obj.nextSibling.nextSibling.childNodes;
		var allDel_lis=new Array();
		for(var i=allDel_li.length-1;i>=0;i--){
			allDel_lis.push(allDel_li[i].id);
			allDel_ul.removeChild(allDel_li[i]);

		}
	allDel_lis.join(',');
	delListAll(allDel_lis);
}

function delListAll(value){
 	var send_value=value;
 	alert(send_value);
 	var url="allDeLists.php";
	var httpobj =createHttpRequest();
	httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
  			alert(httpobj.statusText);
  			}
			};
	
		httpobj.open("POST",url);
		httpobj.setRequestHeader('Pragma', 'no-cache');
		httpobj.setRequestHeader('Cache-Control', 'no-cache');
		httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
		httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		httpobj.send("send_value="+send_value);
}
||


>|php|
<?php
include("./log.php");
?>
<?php
  header('Content-Type: text/html; charset=UTF-8');
    $input=$_POST['send_value'];
    $mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
		if($mysqli->connect_error){echo "ＤＢ接続できませーん";}
	$stmt=$mysqli->prepare("SET NAMES utf8");
	$stmt->execute();
	$stmt=$mysqli->prepare("update t_01 set delflg='1' where id in($input) ") or exit("error");
	$stmt->execute();
	$mysqli->close();

?>