Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to append and remove elements using jQuery

Posted on 2011-09-07
8
Medium Priority
?
803 Views
Last Modified: 2012-06-21
 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..

<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>

Open in new window

0
Comment
Question by:encoredatas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 5

Expert Comment

by:Didier Vally
ID: 36495480
You have to use .remove() and .add() functions from JQUERY API.
0
 

Author Comment

by:encoredatas
ID: 36495617
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!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36495630
>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").appendTo("#divReadBooks");

same as :

$("#divCurrentBooks").find("#DIV_TO_MOVE_ID").appendTo("#divReadBooks");
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:encoredatas
ID: 36496586
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!!
0
 
LVL 82

Expert Comment

by:hielo
ID: 36497163
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>

Open in new window

0
 

Author Comment

by:encoredatas
ID: 36498362
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!
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 36498434
use the script below:
<script type="text/javascript">
	$(function(){
		$('div.book').live('click',function(){
			if( $(this).closest('#divCurrentBooks').size() )
			{
				$(this).clone().appendTo('#divReadBooks');
			}
			else
			{
				$(this).clone().appendTo('#divCurrentBooks');
			}
			$(this).remove();
		});
	});
	</script>

Open in new window

0
 

Author Closing Comment

by:encoredatas
ID: 36498702
hielo,

thanks you rock.  This is just what I need thanks!!
0

Featured Post

Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question