js 删除append标签添加的元素

ゞ浴缸里的玫瑰 2022-08-20 10:27 1005阅读 0赞

问题情境：通过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部分：

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();

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