ورود به کارتابل مشتریان وب مهراز
حذف عناصر در jQuery
یادگیری jQueryبا جیکوئری به راحتی می توان عناصر html موجود را حذف کرد.
حذف عنصر/محتوا
دو متد برای حذف عنصر و محتوا وجود دارد:
Remove() – حذف عنصر انتخاب شده(و عناصر فرزند آن)
Empty() – حذف فرزندان از عنصر انتخاب شده
متد remove()
این متد عناصر انتخاب شده و فرزندان آن را حذف می کند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.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>
متد empty()
این متد عناصر فرزند عنصر انتخاب شده را حذف می کند.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.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>
فیلتر عناصر برای حذف
متد remove یک پارامتر می پذیرد، که به شما اجازه فیلتر عناصر را برای حذف می دهد.
این پارامتر می تواند هرنوع انتخابگری از جیکوئری باشد.
مثال زیر تمام عناصرpبا کلاس class="test" را حذف می کند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test");
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<p class="test">This is another paragraph.</p>
<button>Remove all p elements with class="test"</button>
</body>
</html>
مثال زیر تمام عناصرp با class="test" و class="demo" را حذف می کند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test, .demo");
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
.demo {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="test">This is p element with class="test".</p>
<p class="test">This is p element with class="test".</p>
<p class="demo">This is p element with class="demo".</p>
<button>Remove all p elements with class="test" and class="demo"</button>
</body>
</html>
نظر شما
>