jquery怎么清空div的子元素？

如需刪除元素和內(nèi)容，一般可使用以下兩個 jQuery 方法：

創(chuàng)新互聯(lián)專注于榆林企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,商城網(wǎng)站定制開發(fā)。榆林網(wǎng)站建設公司,為榆林等地區(qū)提供建站服務。全流程按需開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除子元素

本文實例講述了jQuery使用empty()方法刪除元素及其所有子元素的方法，分享給大家供大家參考，具體實現(xiàn)方法如下：

$.ajax({

url: "SearchSN.aspx",

data: "SN=" + $("#txtStorageSN").val(),

cache: false,

success: function (html) {

$("#showResult").empty();

$("#showResult").append(html);

$("#showResult").css("color", "red");

}

});

頁面：div id="showResult"/div

$("#showResult").empty();//清除div內(nèi)容(Div內(nèi)容是通過aspx頁面進行動態(tài)添加的，需要先清除div內(nèi)容)

怎樣使用 jquery 清空文本框的內(nèi)容

可以使用 jQuery 設置內(nèi)容的val()方法來實現(xiàn)，設置內(nèi)容為空即達到清空文本框內(nèi)容的目的：

1

$("input[name='test']").val("").focus(); // 將name=test的文本框清空并獲得焦點，以便重新輸入

示例代碼如下

創(chuàng)建Html元素

div class="box"

span點擊按鈕后清除文本框內(nèi)容：/span

div class="content"

input type="text" name="test" value="這是默認的內(nèi)容"

/div

input type="button" class="btn" value="清除文本框內(nèi)容"

/div

設置css樣式

div.box{width:300px;height:250px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='text']{width:200px;height:30px;border:none;}

input[type='button']{width:120px;height:30px;margin:10px;border:2px solid #ebbcbe;}

編寫jquery代碼

$(function(){

$("input:button").click(function() {

$("input[name='test']").val("").focus(); // 清空并獲得焦點

});

})

JQuery，如何清除，除了點擊的元素以外，其他所有元素

可以使用Jquery中的siblings()和remove()方法實現(xiàn)。實現(xiàn)原理主要是使用siblings獲取被點擊元素之外的同級元素，然后使用remove()刪除。完整的代碼如下：

運行的效果如下：

例如當點擊DIV內(nèi)容為2的框時，其他的DIV被清除，內(nèi)容為2的框移到最頂，點擊后的效果圖如下：

擴展資料：

如果想對移到最頂?shù)目蜻M行一定的突出顯示處理，比如給個背景顏色，字體加大，可以利用css()方法，代碼如下：

!doctype html

html

head

meta charset="utf-8"

titleJQuery例子/title

link href="__CSS__/base.css" rel="stylesheet"

script src="__JS__/jquery.min.js"/script

/head

body

script

$(function(){

$(".class1").click(function() {

$(this).siblings().remove();

$(this).css({"background-color":"yellow","font-size":"50px"});

});

});

/script

div class="main"

div class="class1"1/div

div class="class1"2/div

div class="class1"3/div

div class="class1"4/div

/div

style type="text/css"

.main{width:640px;height:500px;margin:0 auto;border:1px solid red;}

.class1{width:90%;height:100px;margin:0 auto;border:1px solid red;margin-top:10px;font-size:40px;}

/style

/body

/html

運行的效果如下：