jQuery神奇remove()方法：一按按钮，页面元素消失不见

删除静态数据

删除东西其实很重要，特别是对静态数据来说。像网页上的HTML、图啊这些玩意儿，有了jQuery，弄个remove()方法就能把不要的东西全扔了，网站操作起来更简单点。

当你要删除静态数据时，务必记得等页面完全加载完毕！这时候就可以依赖jQuery的神奇方法$(document).ready()来搞定。接下来，使用精确的选择器确认并选中想要删除的内容，之后绑定一个点击事件到该元素上，这样当别人点击“删除”按钮后，程序就能顺利执行删减操作！

比如脑门上挂着红叉的任务列表，一按下去任务就消失！下面我们就热烈开工写出代码吧：

html
    <li>列表项1删除</button></li>
    <li>列表项2删除</button></li>
    <li>列表项3删除</button></li>

首先，找到你的网页上所有“删除”按钮，给它们装个点一下就能执行的脚本就行了。

  
列表项1 删除
  
列表项2 删除
  
列表项3 删除
  
列表项4 删除

“`javascript

$(document).ready(function(){

点击”删除”就会执行这个函数

$(this).parent().remove();

});

});

$(document).ready(function(){
  $('.remove').click(function(){
    $(this).parent().remove();
  });
});

这段代码里，$(this)就是你刚才点击的那颗按钮通过 parent()方法找到它“家”所在的列表项，然后一个 remove()就干净利落地删除了。这样以后你不怕再为表格里那些无辜数据烦恼了，一键删除它们轻松搞定！

删除动态数据

动态数据与静态完全不同，需要用到Javascript来和后端数据互动才能获取到。想删除的话，还得通过AJAX给服务器发消息，等到收到对方说可以删除了的回复后，网页上显示的内容才会改变。

咱们现在就是在玩表格游戏，数据会变动，每条都有个小小的“删除”按钮。好，如果你想删除某条记录，只需轻轻按下这个钮儿，服务器马上知道该删哪个了；等到服务器处理完后，页面也会自动更新！

首先，在HTML结构中设置好每行数据对应的id值：

<td>数据1</td>

<td>删除</button></td>

<td>数据2</td>

<td>

删除</button></td>

那么现在，只需要在咱们这个JavaScript代码中，轻轻按下AJAX的发送按钮，接着处理那到手的成功回应，就大功告成了！

点击’.delete’就可以执行这个动作~

  

    
动态数据1 

删除

动态数据2 删除

动态数据3 删除

动态数据4 删除

$(document).ready(function(){
  $('.remove').click(function(){
    var id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: '/delete.php',
      data: {id: id},
      success: function(data){
        if (data.success) {
          $('#data-list li[data-id="'+id+'"]').remove();
        }
      }
    });
  });
});