We Keep Coding

Remove the second nearest <tr>

I have the following markup:-
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="ProjectETA">
<nobr>Project ETA</nobr>
</span></td>
<td valign="top" width="350px" class="ms-formbody">
<span dir="none">
<table id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldTopTable" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="ms-dtinput">
<label for="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" style="display:none">ProjectETA Date</label>
<input type="text" value="20/03/2020" maxlength="45" id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" title="Project ETA" class="ms-input" autopostback="0">
</td>
<td class="ms-dtinput"><img id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerImage" src="/_layouts/15/images/calendar_25.gif?rev=47" border="0" alt="Select a date from the calendar." data-themekey="#"></td><td><iframe id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=47" frameborder="0" scrolling="no" style="display:none; position:absolute; width:200px; z-index:101;" title="Select a date from the calendar."></iframe></td></tr></tbody></table></span>
</td>
</tr>
i wrote the following to remove the second nearest <tr> $("input[id^='ProjectETA_']").closest('tr').closest('tr').remove();, but this removed the nearest tr and not the second nearest tr. any advice?

.closest will return the current element if it matches the selector:
console.log(inner.closest('div'));
<div id="outer">
<div id="inner">
</div>
</div>
You need to navigate up one element in order to be able to call .closest again:
$("input[id^='ProjectETA_']").closest('tr').parent().closest('tr').remove()
$("input[id^='ProjectETA_']").closest('tr').parent().closest('tr').remove();
console.log($('table tr').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="ProjectETA">
<nobr>Project ETA</nobr>
</span></td>
<td valign="top" width="350px" class="ms-formbody">
<span dir="none">
<table id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldTopTable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="ms-dtinput">
<label for="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" style="display:none">ProjectETA Date</label>
<input type="text" value="20/03/2020" maxlength="45" id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" title="Project ETA" class="ms-input" autopostback="0">
</td>
<td class="ms-dtinput"><img id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerImage" src="/_layouts/15/images/calendar_25.gif?rev=47" border="0" alt="Select a date from the calendar." data-themekey="#"></td>
<td><iframe id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=47" frameborder="0" scrolling="no" style="display:none; position:absolute; width:200px; z-index:101;" title="Select a date from the calendar."></iframe></td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</table>

HTML tags get changed when assigning to innerHTML

I have an XML and i m transforming it to HTML using XSL. My transformation is successful and i am geting the resultant string like below :- `
<TABLE xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xslscript="http://mycompany.com/mynamespace" border="0" width="100%">
<TR align="center">
<TD>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<FORM action="jhk" method="get" id="frmMain" name="frmMain">
<TR>
<TD class="tableBg">
<TABLE border="0" cellspacing="1" cellpadding="3" width="100%">
<TR class="mainListRow">
<TD colspan="7">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD class="ListTableTitle" width="12%" nowrap="nowrap">Select Value </TD>
</TR>
</TABLE>
</TD>
</TR>
<TR width="100%">
<TD valign="top" width="100%">
<DIV id="listing" width="100%">
<input type="hidden" id="keyField" value="partnerCd"/>
<TABLE STYLE="background-color:white" id="tblList" border="0" bordercolor="#0099CC" cellspacing="0" width="100%">
</THEAD>
<tr>
<TD align="center" width="8px" height="10px"/>
<TD colspan="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" class="text" name="searchFields" value=""/></td>
</tr>
</table>
</TD>
<TD colspan="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td/>
<td align="right"><input type="button" class="buttonsNewCancelDeleteClose" id="buttonsSearchId" name="buttonsSearch" value="Search" onclick="searchPaginated()"/></td>
</tr>
</table>
</TD>
</tr>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr class="tableFooter">
<td class="tableFooter" align="left" width="10%"/>
<TD class="tableFooter" id="tableFooter" width="90%" align="right"/>
</tr>
</table>
</td>
</TR>
</FORM>
</TABLE>
</TD>
</TR>
</TABLE>
`
then i am assigning it to the innerHTML of Document..
but the form tag is closing in the same line after assignment. like below
<FORM action="jhk" method="get" id="frmMain" name="frmMain"></FORM>
Not able to understand why the tags are rallying.Can anyone please help .I am not able to find any missmatch.
thanks

A <form> can not be inside a <table>.
Either place it around the <table> or in a <td>

In addition, you have a stray </THEAD> tag on line 24 of your sample HTML. This stray tag results in invalid markup, which could be causing the symptoms you're seeing.

remove table tr that have specific content

I have the following form inside SharePoint 2013 web application :-
I need to remove all the Table <tr> except the ones that start with "name" & "title". so can anyone adivce how i can achieve this ? . here is part of the markup for the above image (it show two Tr on that have Content Type (should be removed), while the other contain Name ):-
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
Now i have jquery version 1.7 loaded inside the web application, but i prefer to achieved using pure javaScript.
Thanks
EDIT here is a more detailed markup :-
<div id="contentRow">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<div id="contentBox" aria-relevant="all" aria-live="polite">
<div id="notificationArea" class="ms-notif-box"></div>
<div id="DeltaPageStatusBar">
<div id="customcalender"></div>
<div id="DeltaPlaceHolderMain">
<a id="mainContent" tabindex="-1" name="mainContent"></a>
<div style="padding-left:5px">
<table id="onetIDListForm" class="ms-core-tableNoSpace">
<tbody>
<tr>
<td>
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div id="WebPartWPQ2" class="noindex " style="" allowdelete="false" width="100%" haspers="false" webpartid="6c7d849e-da6b-4138-be9f-b99bde542065">
<table class="ms-informationbar" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-bottom: 5px;">
<div id="listFormToolBarTop" style="display: none;">
<span style="display:none">
<span></span>
<table width="100%">
<tbody>
<tr>
<td width="100%" valign="top">
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<tr>

When in doubt, filter is your friend:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jjzx6mge/4/
$('#formTbl tr').filter(function () {
return !$(".ms-standardheader", this).text().match(/Name|Title/i);
}).remove();
The result returned of a function passed to filter is a boolean value telling which items to retain (truthy), or which to exclude (falsey).
This one targets only rows that have the requested text in the ms-standardheader classed element.
It also only targets a specific inner table to avoid the case of deep searching from the top level table and wiping out entire tables within it.
While you can do this with plain old JS, significantly more code is required.As you already have a version of jQuery installed, it makes sense to use it.

This would work:
$(function() {
$('#formTbl tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (!frstVal.match(/name|title/i)) {
$(this).remove()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Title
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>

This will remove every tr that has a .ms-standardheader element that contains the text Name or Title
$('#formTbl tr').each(function() {
var that = $(this);
var label = that.find('.ms-standardheader').text();
if (label.indexOf('Name') != -1 || label.indexOf('Title') != -1) {
that.remove();
}
});

And here I am, doing this the good ol' plain JS way, since you've asked for it :)
http://jsfiddle.net/m53esfpo/3/
Edit: Updated code and fiddle (thanks #TrueBlueAussie)
Removes every tr except the ones that start with name or title.
var t = document.getElementById('formTbl');
for (var i = 0; i < t.getElementsByTagName("tr").length; i++) {
var s = t.getElementsByTagName("tr")[i].getElementsByClassName('ms-formlabel');
if (s.length > 0) {
if (s[0].innerText.indexOf('Name') < 0 && s[0].innerText.indexOf('Title') < 0) {
t.getElementsByTagName("tr")[i].parentNode.removeChild(t.getElementsByTagName("tr")[i]);
}
}
}

You can do it with this:
$("#formTbl tr td h3").not("h3:contains('Name'):contains('Title')").closest('tr').remove();

Jquery using class in table get data for google dynamic remarketing tag

Im trying to pull out the data and put it in arrays with jquery for google dynamic remarketing tag.
using the css class
gr_row
values---
ecomm_prodid
ecomm_quantity
ecomm_totalvalue
Then insert them like so, if there are multiple values, if only one then no array and remove curreny symbol.
<!-multiple products in cart-->
<script type="text/javascript">
var google_tag_params =
ecomm_prodid: ["123","234"],
ecomm_pagetype: "basket",
ecomm_totalvalue: [100,50]
};
</script>
<!-single product in cart-->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 234,
ecomm_pagetype: "purchase",
ecomm_totalvalue: 120.99
};
</script>
Any help appreciated thanks
google instructions add dynamic remarketing tag
<table class="checkout-cart" border="0" cellpadding="3" cellspacing="2" width="650">
<tbody>
<tr>
<th "="" align="left" width="15%">REF</th>
<th align="left" width="45%">DESCRIPTION</th>
<th align="right" width="10%">QUANTITY</th>
<th align="right" width="10%">PRICE</th>
<th align="right" width="10%">COST</th>
<th align="center" width="10%">REMOVE</th>
</tr>
<tr class ="gr_row">
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="77"> 83 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="242">some product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_0" value="1" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td rowspan="1" class="cart" align="center"><input name="D_0" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="78"> 3571 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="241">another product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_1" value="5" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td class="cart" align="right"> £6.90 </td>
<td class="cart" align="right"> £6.90 </td>
<td rowspan="1" class="cart" align="center"><input name="D_1" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="4" align="right"><b>Subtotal</b></td>
<td class="cart" align="right">£12.69</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>VAT</b></td>
<td class="cart" align="right">£2.54</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td class="cartheading" align="right"><b>£15.23</b></td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
</tbody>
</table>

How to move table to the top of the DIV container based on a Condition with JQuery?

I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.

$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example

$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});