点击按钮后,前面的remove会消失,为什么,怎么才能不让消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.fly{
float:left;
background:rgb(56,62,70);
height:160px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div><h1>Vacation Packages</h1><p></div>
<div class="fly">
<h2>1.Hawaiian Vacation</h2>
<ul>
<li class="vacation">comments on this deal:<br />
"Amaring Deal!!"<br />
"Can't wait to take this trip!"<br />
<button type=button>GET PRICE</button></li>
</ul>
</div>
<div class="fly">
<h2>2.Hawaiian Vacation</h2>
<ul>
<li class="vacation">comments on this deal:<br />
"Amaring Deal!!"<br />
"Can't wait to take this trip!"<br />
<button type=button>GET PRICE</button></li>
</ul>
</div>
<div class="fly">
<h2>3.Hawaiian Vacation</h2>
<ul>
<li class="vacation">comments on this deal:<br />
"Amaring Deal!!"<br />
"Can't wait to take this trip!"<br />
<button type=button>GET PRICE</button></li>
</ul>
</div>
</body>
<script type="text/javascript">
$('document').ready(function(){
var price=$('<span style="font-size:14px; color:red"><strong>from 5000</strong></span>');
$('button').on('click',function(){
//$('.vacation').append(price);
// $(this).closest('.vacation').append(price);
$(this).after(price);
$(this).remove();
});
});
</script>
</html>
var price=$('<span style="font-size:14px; color:red"><strong>from 5000</strong></span>');
======>
var price = '<span style="font-size:14px; color:red"><strong>from 5000</strong></span>';
你用$生成后就是对象了，DOM操作会将对象移动到当前插入的位置。变为字符串就不是dom对象了，会生成新的dom对象
