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();

Remove all images from a table and insert it before

I have the following HTML table:
<div class="someClass" id="someID">
<!-- Move all images inside the td's here -->
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
</td>
</tr>
....
</tbody>
</table>
What I want is go trough each td and remove the image and insert it before the table. And than remove the entire table.
What is the best way to do this?
Thanks.

You can use jQuery and use each() to iterate through all of the td elements and move all of the images within td before the table.
$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});
SEE DEMO

I got this working:
WORKING FIDDLE
$(document).ready(function(){
$('.bvz_beeldthumb').each(function(){
$('.someClass').append(this);
});
$('#mainTable').remove();
});
Document ready means that when the document is ready the code will be fired.
It finds all images with class bvz_beeldthumb on the page and moves it to the div someClass. After that it removes the table.

Try This
$("#mainTable td").each(function() {
var Img=$(this).find("img");
$("#someID").prepend(Img);//here element 'id' in which you want to put these images.
$(this).find("img").html('');
});
I hope this helps you!!

You can try something like
$('#mainTable img').insertBefore('#mainTable')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
</td>
</tr>
</tbody>
</table>

Filtering out just the link to a YouTube video from an email

I am using Google Scripts to get the body of an email. I am trying to have it only save the link that is contained inside a normal YouTube email, which notifies you of an upload from a new user. I would like to, using JavaScript only save the link that is followed when clicking on the image contained in the email. Seen below is a sample of how part of the email looks:
The content of the email is this:
<div>
<table width="620" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td bgcolor="#F0F0F0">
<table width="578" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td height="16"></td>
</tr>
<tr>
<td align="center" valign="top">
<img src="http://s.ytimg.com/yt/img/email/digest/email_header.png">
</td>
</tr>
<tr>
<td height="16"></td>
</tr>
<tr>
<td align="left" bgcolor="#FFFFFF">
<div style="border-style:solid;border-width:1px;border-color:#cccccc">
<table width="578" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td height="22" colspan="3"></td>
</tr>
<tr>
<td width="40"></td>
<td width="498">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#FFFFFF" align="left" width="50">
<img src="https://i.ytimg.com/i/N5jZlcpSP00e_zShDw9EfQ/1.jpg" height="50" width="50">
</td>
<td width="16"></td>
<td>
<div style="font-family:arial,Arial,sans-serif;font-size:18px;color:#333333;line-height:24px" height="59">
FatalDubstepHD has uploaded <b>Empressto - No Love [Dubstep]</b>.
</div>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0">
<tr><td height="22"></td></tr>
</table>
<div style="border-bottom:1px solid #e1e1e1"></div>
<table cellspacing="0" cellpadding="0" border="0">
<tr><td height="22"></td></tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" style="width:480px;margin:0 9px">
<tr>
<td>
<a href="http://www.youtube.com/watch?v=zTYri0ei45Q&feature=em-uploademail" style="text-decoration:none;display:block" class="nonplayable" target="_blank">
<img src="http://i2.ytimg.com/vi/zTYri0ei45Q/hqdefault.jpg" height="360" width="480" border="0">
</a>
</td>
</tr>
<tr><td height="16"></td>
</tr>
<tr>
<td width="480">
<a href="http://www.youtube.com/watch?v=zTYri0ei45Q&feature=em-uploademail" style="text-decoration:none" target="_blank">
<div style="font-family:arial,Arial,sans-serif;font-size:15px;color:#333333;line-height:20px;font-weight:bold">
Empressto - No Love [Dubstep]
</div>
</a>
<div style="font-family:arial,Arial,sans-serif;font-size:13px;color:#999999;line-height:20px">
by
FatalDubstepHD
</div>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0">
<tr><td height="16"></td></tr>
</table>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="498">
<div style="font-family:arial,Arial,sans-serif;font-size:13px;color:#333333;line-height:20px">
● Free Download<br>https://soundcloud.com/<WBR>empresstoro/empressto-no-love<br><br>● Empressto <br>http://www.facebook.com/<WBR>EmpreSSto<br>http://www.twitter.com/<WBR>Empressto<br>http://www.youtube.com/user/<WBR>TheOfficialEmpressto<br><br>● Fatal Dubstep<br>http://www.facebook.com/<WBR>FatalMusicUK<br>http://www.twitter.com/<WBR>FatalMusicUK<br><br>● Owner Of Fatal<br>http://www.twitter.com/<WBR>Mihalis_Costa<br><br>● Contact Email/Submit Music<br>fatalmusicsubmission#gmail.com
</div>
</td>
</tr>
</table>
</td>
<td width="40"></td>
</tr>
<tr>
<td height="22" colspan="3"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="16"></td>
</tr>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="40"></td>
<td width="498">
<div style="color:#999999;line-height:14px;font-size:11px;font-family:arial,Arial,sans-serif">
You were sent this email because you chose to receive updates about new videos uploaded by FatalDubstepHD. If you don't want these updates anymore, you can change your preferences by visiting the subscription manager.
</div>
</td>
<td width="40"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="16"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="40"></td>
<td width="498">
<div style="color:#999999;font-size:11px;line-height:14px;font-family:arial,Arial,sans-serif">
©2013 YouTube, LLC 901 Cherry Ave, San Bruno, CA 94066
</div>
</td>
<td width="40"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="22"></td>
</tr>
</table>
</td></tr></table>
</div>
The problem here is, how do I filter out just the url from an email like this, and also it looks like the text 3D is being added to the url, which is making the url invalid, so I'd also need to remove that from the url. Any ideas of how I could do this?
EDIT:
Here is the code I am using, which is missing the parse data:
function processInbox() {
// get all threads in inbox
var label = GmailApp.getUserLabelByName("Social/YouTube/Dubstep");
var doneLabel = GmailApp.getUserLabelByName("Social/YouTube/Dubstep (added)");
var messages = label.getThreads();
var max = Math.min(messages.length,1);
for( var i = 0; i < max; ++i ) {
var email = messages[i].getMessages()[0];
var contents = email.getBody();
//PARSE HERE
var xml = Xml.parse(contents,true);
Logger.log(xml);
GmailApp.sendEmail('MY EMAIL', 'Xml Contents', Logger.getLog());
//messages[i].markRead();
//messages[i].removeLabel(label).addLabel(doneLabel);
}
};
EDIT2: New Code:
function processInbox() {
// get all threads in inbox
var label = GmailApp.getUserLabelByName("Social/YouTube/Dubstep");
var doneLabel = GmailApp.getUserLabelByName("Social/YouTube/Dubstep (added)");
var messages = label.getThreads();
var max = Math.min(messages.length,5);
for( var i = 0; i < max; ++i ) {
var email = messages[i].getMessages()[0];
var contents = email.getBody();
var st = contents.indexOf('<a href="http://www.youtube.com/watch?v=');
var str1 = contents.substr(st+9,80);
var end = str1.indexOf('&amp');
var link = str1.substring(0,end);
Logger.log(link);
GmailApp.sendEmail('EMAIL', 'Xml Contents', Logger.getLog());
Logger.clear();
//messages[i].markRead();
//messages[i].removeLabel(label).addLabel(doneLabel);
}

I guess the best approach would be to use the XML service to parse the HTML and from there get the elements.
See documentation here, set the lenient parameter to true
I used a similar approach in this post some time ago, you can see the idea...
EDIT :
i didn't succeeded with this approach...
I tried something else using string operations :
...
var contents = email.getBody();
var st = contents.indexOf('<a href="http://www.youtube.com/watch?v=');
var str1 = contents.substr(st+9,80);
var end = str1.indexOf('&amp');
var link = str1.substring(0,end);
Logger.log(link);
it works for this case, you will have to check if it works all the time.
Note : I tested on other shared links sent by email from youTube and it seemed to work every time ;-)