homepage Welcome to WebmasterWorld Guest from 54.166.173.147
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
In JQuery - remove a div with a certain class, but leave its content?
buck1107




msg:4411738
 11:30 pm on Jan 27, 2012 (gmt 0)

****JQuery Question****

Hi,
I'm working with a dynamic table row creator in JQuery, and basically, it finds the td and using wrapInner, it wraps the content within the td in a DIV. After being added to the tbody, the DIV is removed. Unfortunately, when I have a DIV in the content within the container DIV, it, too is removed. Is there a way to keep all inner content and just remove the outer DIV tag?

Thanks for your help
Below is the code for adding a table row (I've commented the areas with my attempts):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Add new table rows with jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.AniRows.js" type="text/javascript"></script>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!--
This first example allows you to add rows and delete rows from the top of the table
-->
Add/Remove - Bottom Row<br />
<button id="addRowDemo1">Add a row</button>
<button id="removeRowDemo1">Remove a row</button>
<table id="Demo1" class="rounded-corner" summary="Anirows Demo 1">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
<td class="rounded-foot-right">&nbsp;</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inatech</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>CyberCyst</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>GlobalGlom</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr>
<td>MegaSoft</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>
<!--
Same thing here except now from bottom, this can be add from top remove from bottom, whatever you like.
-->
Add/Remove - Top Row<br />
<button id="addRowDemo2">Add a row</button>
<button id="removeRowDemo2">Remove a row</button>
<table id="Demo2" class="rounded-corner" summary="Anirows Demo 2">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
<td class="rounded-foot-right">&nbsp;</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inatech</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>CyberCyst</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>GlobalGlom</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr>
<td>MegaSoft</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>
<!--
This demo adds and removes rows that have controls in them...this could be asp.net controls or whatever you wante.
-->
Add row using row with controls<br />

<button id="addRowDemo3">Add a row</button>
<button id="removeRowDemo3">Remove a row</button>
<table id="Demo3" class="rounded-corner" summary="Anirows Demo 1">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
<td class="rounded-foot-right">&nbsp;</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inatech</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>CyberCyst</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>GlobalGlom</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr id = "newRow">
<td>MegaSoft</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {

$("#addRowDemo1").click(function () {
$("#Demo1").addRow({
newRow: "<tr><td><div>Scubysoft</div></td><td>30.3</td><td>40.5</td><td>63.5</td><td>42.3</td></tr>"
});
$('#Demo1 tr td:not(:last-child)').addClass("rounded");
});
$("#removeRowDemo1").click(function () {
$("#Demo1").removeRow({});
});


$('#Demo1 tr td:not(:last-child)').addClass("rounded");
});
</script>



Below is the add row function:



(function ($) {
var defaults = {
rowSpeed: 300,
newRow: null,
addTop: true,
removeTop: true
};
var newClasses = "newRow"
var options = $.extend(defaults, options);
$.fn.addRow = function (options) {
opts = $.extend(defaults, options);
var $table = $(this);
var $tableBody = $("tbody", $table);
var t = $(opts.newRow).find("td").wrapInner("<div style='display:none;' class='tempwrap'/>").parent()
if (opts.addTop) t.appendTo($tableBody);
else t.prependTo($tableBody);
t.attr("class", newClasses).removeAttr("id").show().find("td div").slideDown(options.rowSpeed, function () {
$(this).each(function (index) {
//alert(index + ': ' + $(this).text());
//*****************below are the two original lines********************************************
var $set = jQuery(this);
$set.replaceWith($set.contents());
//*****************end****************************************************************************
//*****************here are the lines I've tried (commented out - below)*********************
//var $set = jQuery(this).find(".tempwrap");
//jQuery(this).remove(".tempwrap");
//var $set = $(this).find(".tempwrap");
//$set.remove();//
//$set.replaceWith($set.contents());
//***************end********************************************************************************
}).end()
})
return false;
};

 

Fotiman




msg:4420018
 4:19 pm on Feb 21, 2012 (gmt 0)

Try this:
Change find("td div") to find("td > div"). This will select only the div elements that are a direct child of the parent td.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved