js 删除append标签添加的元素

时间:2021-06-28 06:51:24

问题情境:通过append添加的元素(标签),每次执行这个js方法时,就会再次拼接,所以要进行判断,如果存在便删除。

这个问题本身并不复杂,但是我在写的时候脑袋短路了,$("#id") 我没有写#号(还是写的少的原因吧),结果以为直接通过if($("#id") )判断是否存在不可行,于是便绕道而行,但虽费劲周折却也学到了很多知识,下面整理一下。

1,为了方便删除append添加的元素,应把要拼接的标签定义成一个jQuery对象,这样方便以后删除,其实也可以通过给标签添加id来删除。

代码:

<script type= "text/javascript" >
     $(document).ready( function (){
         $html = $( "<div class='win_box'><ul class='title'><li class='close' id='_close'>关闭</li></ul></div><div class='win'></div>" );
         $( "#_askde" ).click( function (){
             $( "body" ).append($html); //必须节点存在文档内才可添加事件。否则要使用live或者on来绑定事件
             $( "#_close" ).click( function (){
                 $html.remove(); //事先存好了对象就方便删除了
             });
         });
     });
</script>
2,typeof的用法,用来判断获得对象的类型。
 
  

JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据。

typeof 可以用来检测给定变量的数据类型,可能的返回值:1. 'undefined' --- 这个值未定义;

2. 'boolean'    --- 这个值是布尔值;

3. 'string'        --- 这个值是字符串;

4. 'number'     --- 这个值是数值;

5. 'object'       --- 这个值是对象或null;

6. 'function'    --- 这个值是函数。

 

Js代码 

         1)     var aa = 'test string';   

             alert(typeof aa);  // 'string'   

           alert(typeof 90);  // 'number'  

2)

 if(typeof $("#myLable").html() != "undefined") {
// $lable.remove();
$("#myLable").remove();
}
  

3,bootstrap模态框关闭执行事件的方法

代码://模态框关闭时触发的事件
$(function () { $('#processModal').on('hidden.bs.modal', function () {
$("#myLable").remove();
   $("#myDiv").remove();
     })
  }); */

4,这是三天之后增加的,因为涉及到appen的问题,所以把它放到这篇文章里

1)append为表格拼接行,直接在tbody上增加一个id属性,然后通过jQuery得到这个tbody的jQuery对象,然后直接拼接自己的行就可以,代码如下

table部分:

 <table  class="table table-condensed table-hover table-bordered "  style="width: 80%;margin-left:100px;" >
<thead style="padding-left :50px">
<tr>
<th>附件标题</th>

<th>相关操作</th>
</tr>
</thead>
<tbody id="attachmentTable">
</tbody>
</table>
js部分:

//拼接已上传附件
var str = "";
str += "<tr id='"+data.attachment.id+"'><td>"+data.attachment.title+"</td><td>";
//拼接删除按钮
str += "<button class='btn btn-danger btn-xs' onclick='att_del('"+data.attachment.id+"');'><i class='fa fa-minus'></i> 删除附件</button>";
str += "</td></tr>";
$("#attachmentTable").append(str);
其中我给每一行的id属性设置为每个附件自己在数据库的id,这样到后面想删除的时候,可以根据id直接删除了,如下

 $("#"+attId).remove();

如果您有更好的方法也不要忘记写出来。