Martin Davis
asked on
How to append and remove elements using jQuery
Hi Experts,
I'm new to jQuery and just wanted to know how to add and remove elements (<div>) from one <div id="divCurrentBooks" > to another <div id="divReadBooks"> using jQuery. I have an example of where a person can bring up a list of available books to read (divCurrentBooks), if they like to book they can double click the book and append the book to the (divReadBooks). If they change their mind they can double click the book and add it back to (divCurrentBooks). I know how to just append a element inside of another element, but how can I using jQuery to attach an event that will recognize which parent <div> that the child <div> belongs to and do the appropriate actions to append or remove inner <div> back and forward between the two parent <div>. I have included the example markup below. Thanks for any help in advance..
I'm new to jQuery and just wanted to know how to add and remove elements (<div>) from one <div id="divCurrentBooks" > to another <div id="divReadBooks"> using jQuery. I have an example of where a person can bring up a list of available books to read (divCurrentBooks), if they like to book they can double click the book and append the book to the (divReadBooks). If they change their mind they can double click the book and add it back to (divCurrentBooks). I know how to just append a element inside of another element, but how can I using jQuery to attach an event that will recognize which parent <div> that the child <div> belongs to and do the appropriate actions to append or remove inner <div> back and forward between the two parent <div>. I have included the example markup below. Thanks for any help in advance..
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td align="center" valign="top" style="width: 50%;" class="tableCell1">
<table style="width: 100%">
<tr>
<td align="center" class="tableHead1 tableCell1">
<asp:Label ID="lblImportBooksHead" runat="server" SkinID="sknDisplayBoxText1" Text="Potential Books To Read" />
<br />
</td>
</tr>
<tr>
<td align="center" valign="top">
<asp:Label runat="server" ID="lblCurrentBooksInfo" SkinID="sknSmallLabel3" Text="(Double-click to Select Books From This List to Read)" /><br />
<%-- AVAILABLE BOOKS TO READ --%>
<div id="divCurrentBooks" style="text-align: center;">
<div title='Add Book Dolphins To The Read Books' style='padding: 20px 15px 5px 20px;'
id='Book343' bookid='DPE'>
<table style='width: 100%; cursor: default;'>
<tr>
<td>
<table style='width: 100%;'>
<tr>
<td align='left' class="labelHead">
A Book about Dolphins
</td>
</tr>
<tr>
<td align='left' class='labelHeadSmall3'>
ISBN Nbr: 434343434343
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div title='Add Book Fish To The Read Books' style='padding: 20px 15px 5px 20px;'
id='Book344' bookid='FPE'>
<table style='width: 100%; cursor: default;'>
<tr>
<td>
<table style='width: 100%;'>
<tr>
<td align='left' class="labelHead">
A Book about Fish
</td>
</tr>
<tr>
<td align='left' class='labelHeadSmall3'>
ISBN Nbr: 34343434
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" align="center" style="width: 50%;" class="tableCell1">
<table style="width: 100%">
<tr>
<td align="center" class="tableHead1 tableCell1">
<asp:Label ID="lblImportedBooksHead" runat="server" SkinID="sknDisplayBoxText1" Text="Book To Read" />
</td>
</tr>
<tr>
<td align="center" valign="top">
<asp:Label runat="server" ID="lblReadbooksInfo" SkinID="sknSmallLabel3" Text="(Double-click to Remove Books)" /><br />
<%-- Book to Read --%>
<div id="divReadBooks">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
You have to use .remove() and .add() functions from JQUERY API.
ASKER
Still in the question how do I bind the function the inner div and tell which parent div that I am in to add and remove teh element appropriately. Can you provide a sample code snipet. Thanks!
>how to add and remove elements (<div>) from one <div id="divCurrentBooks" > to another <div id="divReadBooks"> using jQuery
use appendTo : http://api.jquery.com/appendTo/
If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):
$("#DIV_TO_MOVE_ID", "#divCurrentBooks").append To("#divRe adBooks");
same as :
$("#divCurrentBooks").find ("#DIV_TO_ MOVE_ID"). appendTo(" #divReadBo oks");
use appendTo : http://api.jquery.com/appendTo/
If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):
$("#DIV_TO_MOVE_ID", "#divCurrentBooks").append
same as :
$("#divCurrentBooks").find
ASKER
I understand the concept of append ast stated in my question, but how do I tell which parent div I am in when the double click event happens. Also how do I attach the event to child element. There could be an unlimted amout of books. Can you please provide a sample. Thanks!!
save as test.html and try it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#divCurrentBooks{background-color:yellow;}
#divReadBooks{background-color:#ededed;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('div.book').bind('click',function(){
$(this).clone().appendTo('#divReadBooks');
$(this).remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td align="center" valign="top" style="width: 50%;" class="tableCell1">
<table style="width: 100%">
<tr>
<td align="center" class="tableHead1 tableCell1">
<asp:Label ID="lblImportBooksHead" runat="server" SkinID="sknDisplayBoxText1" Text="Potential Books To Read" />
<br />
</td>
</tr>
<tr>
<td align="center" valign="top">
<asp:Label runat="server" ID="lblCurrentBooksInfo" SkinID="sknSmallLabel3" Text="(Double-click to Select Books From This List to Read)" /><br />
<%-- AVAILABLE BOOKS TO READ --%>
<div id="divCurrentBooks" style="text-align: center;">
<div class="book" title='Add Book Dolphins To The Read Books' style='padding: 20px 15px 5px 20px;' id='Book343' bookid='DPE'>
<table style='width: 100%; cursor: default;'>
<tr>
<td>
<table style='width: 100%;'>
<tr>
<td align='left' class="labelHead">
A Book about Dolphins
</td>
</tr>
<tr>
<td align='left' class='labelHeadSmall3'>
ISBN Nbr: 434343434343
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="book" title='Add Book Fish To The Read Books' style='padding: 20px 15px 5px 20px;' id='Book344' bookid='FPE'>
<table style='width: 100%; cursor: default;'>
<tr>
<td>
<table style='width: 100%;'>
<tr>
<td align='left' class="labelHead">
A Book about Fish
</td>
</tr>
<tr>
<td align='left' class='labelHeadSmall3'>
ISBN Nbr: 34343434
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" align="center" style="width: 50%;" class="tableCell1">
<table style="width: 100%">
<tr>
<td align="center" class="tableHead1 tableCell1">
<asp:Label ID="lblImportedBooksHead" runat="server" SkinID="sknDisplayBoxText1" Text="Book To Read" />
</td>
</tr>
<tr>
<td align="center" valign="top">
<asp:Label runat="server" ID="lblReadbooksInfo" SkinID="sknSmallLabel3" Text="(Double-click to Remove Books)" /><br />
<%-- Book to Read --%>
<div id="divReadBooks">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
ASKER
helio,
This works fine, but what about the other way around liked I mentioned in the question. Once they are moved and they change there mind they should be able to remove it from the (divReadBooks) back to the (divCurrentBooks) section. Back to orignal question how to tell which parent div it is in when the click event happens. Thanks!
This works fine, but what about the other way around liked I mentioned in the question. Once they are moved and they change there mind they should be able to remove it from the (divReadBooks) back to the (divCurrentBooks) section. Back to orignal question how to tell which parent div it is in when the click event happens. Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hielo,
thanks you rock. This is just what I need thanks!!
thanks you rock. This is just what I need thanks!!