js 删除append标签添加的元素_js清空append的内容-优快云博客

本文链接：https://blog.youkuaiyun.com/kangguowei/article/details/50724612

本文介绍了如何在JavaScript中删除通过append方法添加的元素。强调了将要拼接的元素定义为jQuery对象以便于后续删除，同时提供了使用typeof检查变量类型，以及利用bootstrap模态框关闭事件删除元素的方法。此外，还分享了在表格中使用append拼接行的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题情境：通过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' οnclick='att_del('"+data.attachment.id+"');'><i class='fa fa-minus'></i> 删除附件</button>";
							 str += "</td></tr>";
							 $("#attachmentTable").append(str);

其中我给每一行的id属性设置为每个附件自己在数据库的id，这样到后面想删除的时候，可以根据id直接删除了，如下

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

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