Working with DOM

Working with DOM - empty,remove

by Mani Deep

HTML

<div id="tours">
  <h1>Practice Tours</h1>
  <ul>
    <li class="usa tour">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
  </ul>
</div>
<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 id="modify">Modify the div element</button>
<br>
    <p><a href="http://www.qualiantech.com" id="qtcom">QualianTech.com</a></p>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="getset">set/Get</button>

JavaScript

$(document).ready(function() {
var price = $('<p>From $399.99</p>');
$('.usa').before(price);
    $("#modify").click(function(){
        //$("#div1").empty();
        $("#div1").remove();
    });
    //get SEt methods
    $("#getset").click(function(){
        alert($("#test").text());
        alert($("#qtcom").attr("href"));
	});
});