如何在一定时间后删除HTML追加

时间:2014-11-06 17:14:58

标签: javascript php jquery html ajax

目前我有一个使用jquery和php上传信息的页面,接下来它应该显示最近添加的项目几秒钟然后淡出它们但是留下最近添加的项目的div。   这些项目正在

中显示
 '<ul id="responds" >

  '</ul>

作为列表项,只要插入成功  这个ajax请求

 '$.ajax({
  type: "POST", // HTTP method POST or GET
  url: "response.php", //Where to make Ajax calls
  dataType:"text", // Data type, HTML, json etc.
  data:myData, //
  success:function(result){
     $("#responds").delay(10000).fadeIn();
    $("#responds").append("<li class='res'>"+result+"</li>");
           $('.res').remove();
          $("#proyecto").val(''); //empty text field on successful
          $("#departamento").val(''); //empty text field on successful
          $("#tipo_activo").val(''); //empty text field on successful
          $("#modelo").val(''); //empty text field on successful
          $("#numero_serie").val(''); //empty text field on successful
          $("#marca").val(''); //empty text field on successful
          $("#numero_remision").val(''); //empty text field on successful
    $("#cuenta_sap").val(''); //empty text field on successful
    $("#ubicacion").val(''); //empty text field on successful
    $("#nombre").val(''); //empty text field on successful
    $("#codigo_centro_beneficio").val(''); //empty text field on successful
    $("#FormSubmit").show(); //show submit button
    $("#LoadingImage").hide(); //hide loading image'

基本上我的问题是如何追加&#39; res&#39;插入之后,然后在一段时间之后淡出它,如果我添加另一个条目,给它相同的淡出时间但不检测第一个。

2 个答案:

答案 0 :(得分:1)

你可以通过创建实际的jQuery对象来做到这一点,然后在超时或回调函数中再次删除它们,比如

$.ajax({
    type: "POST",
    url: "response.php",
    dataType: "text",
    data: myData,
    success: function (result) {
        var li = $('<li />', {
            'class' : 'res',
            text    : result
        });

        $("#responds").append(li).delay(10000).fadeIn();

        setTimeout(function() {
            li.fadeOut(function() {
                $(this).remove();
            });
        }, 15000)

        .... etc

答案 1 :(得分:0)

为追加添加一个唯一的ID,并创建一个查找id的超时并将其删除。