当前位置:编程学习 > JAVA >>

jQuery 入门教程(15): 删除HTML元素

jQuery使用下面两个方法来删除或是清空某个HTML元素。
 
remove() – 删除指定的元素(包括其子元素)
empty() – 清空指定元素的子元素
例如:
 
 
[html]  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>JQuery Demo</title>  
    <script src="scripts/jquery-1.9.1.js"></script>  
    <script>  
        $(document).ready(function () {  
            $("button").click(function () {  
                $("#div1").remove();  
            });  
        });  
    </script>  
</head>  
<body>  
  
    <div id="div1" style="height: 100px; width: 300px;  
        border: 1px solid black; background-color: yellow;">  
        This is some text in the div.  
        <p>This is a paragraph in the div.</p>  
        <p>This is another paragraph in the div.</p>  
  
    </div>  
    <br>  
    <button>Remove div element</button>  
  
</body>  
</html>  
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").remove();
            });
        });
    </script>
</head>
<body>
 
    <div id="div1" style="height: 100px; width: 300px;
        border: 1px solid black; background-color: yellow;">
        This is some text in the div.
        <p>This is a paragraph in the div.</p>
        <p>This is another paragraph in the div.</p>
 
    </div>
    <br>
    <button>Remove div element</button>
 
</body>
</html>
 
 
 
20130309005
 
empty() 示例:
 
[html]  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>JQuery Demo</title>  
    <script src="scripts/jquery-1.9.1.js"></script>  
    <script>  
        $(document).ready(function () {  
            $("button").click(function () {  
                $("#div1").empty();  
            });  
        });  
    </script>  
</head>  
<body>  
  
    <div id="div1" style="height: 100px; width: 300px;  
        border: 1px solid black; background-color: yellow;">  
        This is some text in the div.  
        <p>This is a paragraph in the div.</p>  
        <p>This is another paragraph in the div.</p>  
  
    </div>  
    <br>  
    <button>Empty the div element</button>  
  
</body>  
</html>  
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").empty();
            });
        });
    </script>
</head>
<body>
 
    <div id="div1" style="height: 100px; width: 300px;
        border: 1px solid black; background-color: yellow;">
        This is some text in the div.
        <p>This is a paragraph in the div.</p>
        <p>This is another paragraph in the div.</p>
 
    </div>
    <br>
    <button>Empty the div element</button>
 
</body>
</html>
20130309006
jQuery的remove()方法也支持一个参数,可以用于过滤一些需要删除的HTML元素。这个参数可以为任何有效的jQuery selector.
比如下面代码只删除class=”italic”的<p>元素:
 
 
[javascript] 
$("p").remove(".italic");  <
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,