Develop Reference

How to remove element by class only if it contains an element with some specified text?

<tr class="Action Head" data-index="1">
<td class="Template">
<div class="Description">
<span class="Text Description" id="MainDescription">text</span>
</div>
</td>
</tr>
How can I remove element with class="Action Head" if span that's inside it with id="MainDescription" contains some specified text?

You can use Array.filter to select elements by their content, using a function that checks the content of the element to see if it matches your required criteria. For example:
//variable rowsToRemove will be an array that contains all the rows that contain
//a span with id MainDescription which contain the word 'text'
var rowsToRemove = [].filter.call(document.querySelectorAll('.Action.Head'), function(row){
var mainDescriptionSpan = row.querySelector('span#MainDescription');
return (mainDescriptionSpan && mainDescriptionSpan.textContent.indexOf('text') != -1);
});
if (rowsToRemove.length) { //if there are some row(s) that match the criteria...
rowsToRemove.forEach(function(row){ // ... loop through all of them ...
row.remove(); // ... and remove them.
});
}

You can use the function querySelectorAll to gather the whole set of elements Action Head then loop over those elements and for each Action Head element get its span element.
With that span element check the attribute textContent.
This code snippet will remove only one TR.
var actions = document.querySelectorAll('.Action.Head');
Array.prototype.forEach.call(actions, function(action) {
var span = action.querySelector('span');
if (span.textContent === 'text') span.remove();
});
<table>
<tbody>
<tr class="Action Head" data-index="1">
<td class="Template">
<div class="Description">
<span class="Text Description" id="MainDescription">text</span>
</div>
</td>
</tr>
<tr class="Action Head" data-index="1">
<td class="Template">
<div class="Description">
<span class="Text Description" id="MainDescription2">text2</span>
</div>
</td>
</tr>
</tbody>
</table>

Parsing data from js variable containing html

Below is snippet of html that I will be parsing. It is stored inside a js variable.
<tr class='preview'>
<td class='statistics show' title='Show latest match stats'>
<button class="js-hide">Show</button>
</td>
<td class='match-details'>
<p>
<span class='team-home teams'>
<a href='#'>Leicester</a>
</span>
<span class='versus'>
<abbr title='Versus'> V </abbr>
</span>
<span class='team-away teams'>
<a href='#'>Crystal Palace</a>
</span>
</p>
</td>
<td class='kickoff'>
15:00
</td>
<td class='status'></td>
</tr>
<tr class='preview'>
<td class='statistics show' title='Show latest match stats'>
<button class="js-hide">Show</button>
</td>
<td class='match-details'>
<p>
<span class='team-home teams'>
<a href='#'>Liverpool</a>
</span>
<span class='versus'>
<abbr title='Versus'> V </abbr>
</span>
<span class='team-away teams'>
<a href='#'>Spurs</a>
</span>
</p>
</td>
<td class='kickoff'>
15:00
</td>
<td class='status'></td>
</tr>
Result ..
Leicester vs. Crystal Palace
Liverpool vs. Spurs
I'm interested in the home and away team names. The vs. can be added between each easily.
Could anyone suggest if there is a simple solution for parsing this string? Are RegEx the only approach?

What you're looking for is DOMParser with its parseFromString method.
Simply pass in your HTML string (and a specified mime-type like 'text/html') into the parser, and you'll get a Document object (or HTMLDocument, to be specific, if you specify the type as 'text/html').
With this Document, you can then query it as usual (whether with querySelector, getElement*, or a library like jQuery).
Here's an example:
var parsedHTML = new DOMParser().parseFromString(myHTMLVariable, 'text/html');
var teams = parsedHTML.querySelectorAll('.teams');

You can insert the HTML string into a temporary element and query it using DOM methods. For example
// HTML in "html" variable
var tmp = document.createElement('div');
tmp.innerHTML = html;
var homeTeams = tmp.querySelectorAll('.team-home');
Array.prototype.forEach.call(homeTeams, function(team) {
console.log(team.textContent);
});

Get html with remove specific element on javascript/jquery

if my HTML is like this :
<tbody id="hasil-pencarian">
<tr>
<td align="center">1</td>
<td>TMS/IT/06/001</td>
<td>Erika Julia Widiyanti</td>
<td>Marketing</td>
<td>14-06-2015 13:59</td>
<td>14-06-2015 14:00</td>
<td>Erika test 1</td>
<td id="action" class="center" width="10px">
<a class="btn btn-success">
</td>
</tr>
</tbody>
I got all the html above like this :
var result = $("#hasil-pencarian").html();
But, How can I get all the HTML without the <td> with id='action' ?
Little confused. Any help will be so appreciated.

I think you could create clone then remove the element then get the content like
var result = $("#hasil-pencarian").clone().find('#action').remove().end().html();

using jquery find('.classname') not working for locating TD elements?

I am traversing the divs on my page and looking up child elements using find and supplying a classname
select elements and input elements are located, but the 3 TDs I am trying to find are returning nothing
Here is the code snippet
$.each($(".ccypair"), function(index, element) {
var elements = {
selectElement : $(element).find('.selectstyle'),
inputElement : $(element).find('.inputstyle'),
tdElement1 : $(element).find('.decayTime'),
tdElement2 : $(element).find('.price.bidprice'),
tdElement3 : $(element).find('.price.offerprice')
};
});
Now the first two find() lines work fine, but the three tdElement ones below resolve to nothing. Anyone able to tell me where I am going wrong. I suspect for TD I need to have a different selector?
Apologies here is the html
<div class="ccypair" id="ccypairdiv_0">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
<div class="ccypair" id="ccypairdiv_1">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="top decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
Thanks

First check if your jQuery is loading with the $, the try this
//think about structure, it makes your code more legible
$(".ccypair").each(function(index) {
var element = $(this); //each .ccypair found
var elements = {
selectElement : element.find('.selectstyle'),
inputElement : element.find('.inputstyle'),
tdElement1 : element.find('.decayTime'),
tdElement2 : element.find('.price.bidprice'),
tdElement3 : element.find('.price.offerprice')
};
});
cheers

As always a back to basics approach worked. A simple typo was the root cause here. Apologies
On that note. Does jQuery provide a flag so that rather than failing to locate an element and failing silently it will print out an error message. This would be really helpful?

Repeat/Clone a <tr> element using jQuery's clone() function

I am trying to clone a template of a which will be populated with data and then inserted into a table. I'm currently able to use the same .clone() function with other elements on the same page but jQuery refuses to see and clone the template (I'm guessing because its not a block element).
Here is the template:
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
Here is the javascript code:
for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
Thanks!

Found the answer. The clone() function works fine when the template <tr> is encapsulated within <table> and <div> elements. As stated below .innerHTML (which jQuery uses in clone()) does not work with table fragments. That means jQuery will not clone a <tr> if it is a root element (whose parent element is <body>). Therefore, the template should look like this(of course with an appropriate id on the <div> to be selected by jQuery):
<div>
<table>
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
</table>
</div>

for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
correct me if I'm wrong, but why do you need to
var result = results[index];
index is already a single element of results

Alternatively you can wrap the template in a hidden DIV and access the content via jQueries HTML method. On a side note, you might bump heads cloning several items with the same ID. Try use a class approach and add an identifier (Try the new HMTL5 data-* tag attribute).