javascript如何快速的動態刪除與刪除dom元素程式碼詳解-js教程-PHP中文網

首頁

web前端

js教程

javascript如何快速的動態刪除與刪除dom元素程式碼詳解

伊谢尔伦

Jul 21, 2017 am 09:50 AM

javascript js 刪除

在DOM中我們可以方便快速的動態刪除與刪除dom元素

例1：

動態建立一個按鈕

<html> 
<head> 
<title>动态创建按钮</title> 
<script language="javascript"> 
var a,b,ab,ba,c;
function createInputA(){
a = document.createElement("input");  //使用DOM的创建元素方法
a.type = "button" ;                       //设置元素的类型
a.value = "按钮A";                     //设置元素的值
a.attachEvent("onclick",addInputB);    //为控件添加事件
document.body.appendChild(a);             //添加控件到窗体中
//a = null;              //释放对象
}

登入後複製

範例2：

<html>
<head>
<script type="text/javascript">
    function test(){        
        //createElement()  创建一个指定标签名的元素[比如:动态创建超链接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="连接到百度";
        createa.href="http://www.jb51.net";
        //createa.color="green" ////添加颜色(不要忘记style属性，不然没有效果)
        createa.style.color="green"
        //添加默认位置--body 并且添加子节点
        //document.body.appendChild(createa);
        //放置指定位置
        document.getElementById("p1").appendChild(createa);
    }
    
    function test2(){
        //指定位置删除节点removeChild()
        document.getElementById("p1").removeChild(document.getElementById("a1")); //id 名重复 js只取第一个
    }
</script>
</head>
<body>
<!--动态创建元素-->
<input type="button" value="创建一个a标签" onclick="test()"/><br/>
<input type="button" value="删除创建一个a标签" onclick="test2()"/>
<p id="p1" style="width:400px;height:300px;border:1px solid silver">
</p>
</body>
</html>

登入後複製

動態建立多個表單：

<html>
 <head>
  <script type="text/javascript">
   window.onload = function() {
    var aBtn = document.createElement("input");
    var bBtn = document.createElement("input");
    var cBtn = document.createElement("input");
    
    aBtn.type = "button";
    aBtn.value = "按钮A";
    aBtn.onclick = copyBtn;
    
    bBtn.type = "button";
    bBtn.value = "按钮B";
    bBtn.onclick = copyBtn;
    
    cBtn.type = "button";
    cBtn.value = "按钮C";
    cBtn.onclick = clearCopyBtn;
    
    document.body.appendChild(aBtn);
    document.body.appendChild(bBtn);
    document.body.appendChild(cBtn);
   };
   
   function copyBtn() {
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = this.value;
    btn.isCopy = true;
    btn.onclick = copyBtn;
    document.body.appendChild(btn);
   }
   
   function clearCopyBtn() {
    var btns = document.getElementsByTagName("input");
    var length = btns.length;
    for (var i = length - 1; i >= 0; i--) {
     if (btns[i].isCopy) {
      document.body.removeChild(btns[i]);
     }
    }
   }
  </script>
 </head>
 <body>
  
 </body>
</html>

登入後複製

以上是javascript如何快速的動態刪除與刪除dom元素程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7861

Java教學

1649

CakePHP 教程

1404

Laravel 教程

1300

PHP教程

1242

Related knowledge

小紅書筆記怎麼刪除 Mar 21, 2024 pm 08:12 PM

小紅書筆記怎麼刪除?在小紅書APP中是可以編輯筆記的，多數的用戶不知道小紅書筆記如何的刪除，接下來就是小編為用戶帶來的小紅書筆記刪除方法圖文教程，有興趣的用戶快來一起看看吧！小紅書使用教學小紅書筆記怎麼刪除1、先打開小紅書APP進入到主頁面，選擇右下角【我】進入到專區;2、之後在我的專區，點擊下圖所示的筆記頁面，選擇要刪除的筆記;3、進入到筆記頁面，右上角【三個點】;4、最後下方會展開功能欄，點選【刪除】即可完成。

微信拉黑再刪除永久加不上是真的嗎 Apr 08, 2024 am 11:41 AM

1.首先，拉黑再刪除永久加不上是假的，拉黑刪除後想要再加對方，只要對方同意即可。 2.如果用戶將某人封鎖，對方將無法向用戶發送訊息、查看用戶的朋友圈、與用戶通話。 3.封鎖並不意味著將對方從用戶的微信聯絡人清單中刪除。 4.如果用戶在封鎖後又將對方從用戶的微信聯絡人清單中刪除，那麼在刪除後是沒有辦法恢復的。 5.如果用戶想再加入對方為好友，需要對方同意並重新新增使用者。

found.000是什麼資料夾？ found.000資料夾可以刪除嗎？ Mar 13, 2024 pm 08:52 PM

　　日常使用電腦的過程中，可能會收到found.000檔案遺失損壞的錯誤提示，這個found.000是什麼資料夾？如果沒有用的話，可以刪除嗎？既然有這麼多人不認識這個文件，下面小編就來跟大家仔細說說found.000文件夾吧~　　一、found.000是什麼文件夾當電腦出現因非法關機導致的文件部分或全部丟失時，可以在位於系統分割區中指定目錄下找到名為「found.000」的特殊資料夾及其內部所包含的以「.chk」為副檔名的檔案。　　這個「fo

小紅書發怎麼刪除？發布刪除怎麼恢復？ Mar 21, 2024 pm 05:10 PM

小紅書作為一個受歡迎的社群電商平台，吸引了大量用戶分享生活點滴和購物心得。有時候我們可能會不經意發布一些不合適的內容，這時候需要及時刪除，這樣可以更好地維護個人形像或遵守平台規定。一、小紅書發布怎麼刪除？ 1.登入小紅書帳號，進入個人首頁。 2.在個人主頁下方，找到「我的創作」選項，點選進入。 3.在「我的創作」頁面，你可以看到所有發布的內容，包括筆記、影片等。 4.找到需要刪除的內容，點選右側的「...」按鈕。 5.在彈出的選單中，選擇“刪除”選項。 6.確認刪除後，該條內容將從你的個人主頁和公開頁面消失

小紅書把別人評論刪了怎麼找回來？把別人留言刪了會有顯示嗎？ Mar 21, 2024 pm 10:46 PM

小紅書作為一款熱門的社群電商平台，用戶之間的互動評論是平台中不可或缺的溝通方式。有時候，我們可能會發現自己的評論被其他人刪除，這種情況可能會讓我們感到困惑。一、小紅書把別人評論刪了怎麼找回來？當發現自己的評論被刪除時，首先可以嘗試在平台上直接搜尋相關的貼文或商品，查看是否還能找到該評論。如果評論被刪除後仍然顯示，那麼可能是被原帖主刪除的，這時候可以嘗試聯絡原帖主，詢問其刪除評論的原因，並要求恢復評論。如果評論已經被完全刪除且無法在原始貼文上找到，那麼在平台上恢復評論的機會相對較小。可以嘗試使用其他途徑

抖音聊天記錄怎麼徹底消除乾淨 May 07, 2024 am 11:14 AM

1.開啟抖音app，點選介面底部的【訊息】，點選需要刪除的聊天對話入口。 2.長按任一聊天記錄，點選【多選】，勾選想要刪除的聊天記錄。 3.點選右下角的【刪除】按鈕，在彈出的視窗中選擇【確認刪除】即可將這些記錄永久刪除。

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

微信檔案傳輸助手怎麼徹底刪除_微信檔案傳輸助手關閉方法介紹 Mar 20, 2024 pm 08:31 PM

微信的文件傳輸助手是每個用戶都有的，有些用戶將它當做成了備忘錄，會記錄一些東西。那麼微信檔案傳輸助手要怎麼徹底刪除呢？下面就讓小編為大家詳細介紹一下吧。微信檔案傳輸助手怎麼徹底刪除答案：【微信】-【長按檔案傳輸助手】-【刪除該聊天】。具體步驟：1、先開啟微信軟體，進入到首頁後我們找到【檔案傳輸助理】長按；2、然後會彈出標為未讀、置頂該聊天、不顯示該聊天、刪除該聊天，在這裡我們點選【刪除該聊天】即可；

See all articles

javascript如何快速的動態刪除與刪除dom元素程式碼詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題