Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Friday, December 6, 2013

jQuery - replace html element by .remove()

.remove()
Remove the set of matched elements from the DOM.

You could remove an element from DOM but it doesn't get eliminated from wrapper set and this feature allows you remove an element, operate on that element, and then place that element back into the DOM, all within a single jQuery chain.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title> </head> <body> <div id="ItemToBeRelaced">remove it!</div>
<script> (function ($) { $('#ItemToBeRelaced') .remove() .html('<a href="http://greyknots.com/">GreyKnots</a>') .appendTo('body'); })(jQuery); </script>
</body> </html>

Share/Bookmark

jQuery - difference between closest() and parents()

closest() stops traversing once it finds a match.
closest() can only return a maximum of one element.
closest() will actually include the currently selected element in its filtering.
parents() gets all parents and then filters on your optional selector.

Try the following example:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title> </head> <body> <!-- Nested Div(s) --> <div id="parent3"> <div id="parent2"> <div id="parent1"> <div id="parent0"> <div id="LastInChain"></div> </div> </div> </div> </div>
<script> (function ($) { alert($('#LastInChain').parents().length); alert($('#LastInChain').parent().attr('id')); alert($('#LastInChain').parents('#parent0').attr('id')); alert($('#LastInChain').parents()[0].id);
alert($('#LastInChain').closest('#parent1').length); alert($('#LastInChain').closest('#parent1').length); alert($('#LastInChain').closest('#parent1').attr('id')); })(jQuery); </script>
</body> </html>

Share/Bookmark