تو قسمت قبلی یه توضیح مختصر درباره اصل برنامه دادم،‌خیلی خیلی مختصر، و بعد یه قسمت اونو، که همون قسمت اضافه کردن بود،‌با آژاکس دوباره نوشتم. شرطم هم که این بود، بدون آژاکس و جاوا اسکریپت هم، کل برنامه کار میکرد، بدون کم و کاست. ایندفعه، میخوام یه قابلیت دیگه رو هم آژاکسی!!! کنم. قابلیت حذف از لیست. البته باز هم شروط قبلی بر جا هستند.
گام اول ایجاد تابعی هست که با کلیک بر روی لینک های حذف،‌این تابع فراخوانی بشه. میشه این تابع رو مستقیم نوشت یعنی اینجوری :‌

$('.dellink').click(function(){
  //code here ....
});

ولی یه مشکلی هست، اونم وقتی که یه ردیف جدید اضافه میشه،‌لینک حذف اون هم باید اینطوری تنظیم بشه، یه کم دردسر داره، یعنی کد باید دوباره اونجا هم نوشته بشه. به جای اینکار یه متغیر ایجاد میکنیم و تابع رو توی اون متغیر مینویسیم، بعد هر جا لازم شد اونو به لینکها اضافه میکنیم. 

var delLinkFunc=function(){
  //code here
};
//then use this :
$('.dellink').click(delLinkFunc);

اینجوری هر جا که بخوایم میتونیم کدو نسبت بدیم به رویدادی که داریم.

کد ما نهایتا اینه (البته با یه سری تغییرات ساده تو کد جاوا اسکریپت مربوط به اضافه کردن سطر جدید) 

//Create a new function in order to manage delete links
var delLinkFunc=function(){
	//2-1 : Get the href of this link
	var target=$(this).attr('href');
	//2-2 : Get the current row, we store this in rel attr,
	//we can use affected parameter in returned data instead, but for demonstrate :)
	var row=$(this).attr('rel');
	//2-3 : simply send the request to target using get method
	$.get(
		target,// Target of this link
		{},//No data needed at all, all required is target
		function(data){//Call back , see add function
			//2-4 :Just show message
			$("#msg").removeClass('message')  //Remove any old class, just in case
				 .removeClass('errmessage')
				 .addClass(data.class) //Add new class
				 .html(data.msg);	//change message(innerHTML)
			if (data.affected>-1) {
				//2-5: Remove the row! we can use row selector like
				//$('#'+row)
				//or data.affected like :
				//$('#row_'+data.affected)
				$('#'+row).remove(); //Simply remove it
			}
			},
		"json"	//Data type, see add function
	);
	//Remember to suppress default handler
	return false;
};
//2-6: Add event handler to links :
$('.dellink').click(delLinkFunc);

اما توضیح تکه به تکه.گام اول تو این تابع، گرفتن مقصد لینکه. چون ما نمیخواهیم تغییری تو کد PHP بدیم. بنابراین بهترین راه اینه که هدف این لینک که کلیک شده رو بگیریم :

//2-1 : Get the href of this link
var target=$(this).attr('href');

گام دوم هم اینه که شماره ستون کلیک شده رو بگیریم. من قبلا تو خصیصه rel لینک، اونو ذخیره کردم. البته ما بعدا به این احتیاج داریم، میتونیم مثلا از تو پاسخ هم بگیریمش(قسمت قبل رو ببینید، ما تو جواب یه آرگومان affected داریم که الان همینه، اینکار شاید بهتر باشه ولی ما از روش ساده تر استفاده میکنیم) 

//2-2 : Get the current row, we store this in rel attr,
	//we can use affected parameter in returned data instead, but for demonstrate :)
var row=$(this).attr('rel');

اینو فعلا نگه میداریم،‌تا آخر سر ردیف مورد نظر رو حذف کنیم .
گام بعدی هم سادست، درخواست رو میفرستیم. اینبار با متد get (کلیک روی لینکها به صورت معمولی متد get خواهد بود، و چون ما میخوایم کد رو شبیه سازی کنیم طوری که دقیقا شبیه اصلش کار کنه، ما هم از متد get استفاده میکنیم.) 

//2-3 : simply send the request to target using get method
$.get(
	target,// Target of this link
	{},//No data needed at all, all required is target
	function(data){//Call back , see add function
		//2-4 :Just show message
		$("#msg").removeClass('message')  //Remove any old class, just in case
			 .removeClass('errmessage')
			 .addClass(data.class) //Add new class
			 .html(data.msg);	//change message(innerHTML)
		if (data.affected>-1) {
			//2-5: Remove the row! we can use row selector like
			//$('#'+row)
			//or data.affected like :
			//$('#row_'+data.affected)
			$('#'+row).remove(); //Simply remove it					}
		},
	"json"	//Data type, see add function
);

اینجا دیگه جمع کردن اطلاعات فرم و از این حرفا نداریم. خود لینک همه اطلاعات رو داره، و همه چی خیلی راحت انجام میشه. تابع داخلی هم برای زمانیه که همه چی با موفقیت انجام بشه،‌که مثل پست قبلی، اول پیغام رو با کلاس مورد نظر نمایش میده،‌بعدم اگه موفق شه، سطر رو حذف میکنه. البته اینجا میشه یه سری افکت هم گذاشت، که تو قسمت آخر وقتی همه چی تموم شد یه چند تا افکت ساده هم اضافه میکنم به کد.
آخرین مرحله هم که تنظیم خاصیت کلیک لینک بر روی این تابع هست که بالاتر دیدید.

//2-6: Add event handler to links :
$('.dellink').click(delLinkFunc);

اما یه مساله هنوز هست. این تابع برای سطرهایی که تو همین سری با آژاکس اضافه میشن کار نمیکنه بنابراین باید آخر تابع add هم همین کد رو اضافه کنیم. کد PHP هم که هیچ تغییری نمیخواد کلا. اینم یکی از مزایای این طریق کد نوشتنه، اینم دقیقا تست کنید،‌بدون جاوا اسکریپت هم کار میکنه.
نتیجه این رو میتونید اینجا ببینید. کد رو هم میتونید از آخر همین پست بگیرید.