Develop Reference

How to remove a pattern of table row elements from a table?

If I have the following table, which I can't manually touch, but can apply javascript to...
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
...when the DOM loads fully, how can I remove every instance of <tr><td height="10"></td></tr> from the above table via jQuery or raw JavaScript? I don't need that row at all and its causing design issues for me. This is my first time trying to learn how to replace a full pattern of elements.
Hopefully, this is doable via JavaScript?

This should do the trick.
jQuery
$('td[height="10"]').parent().remove();
https://jsfiddle.net/uzv3fn2e/1/
Vanilla JS
Array.from(document.querySelectorAll('td[height="10"]')).forEach(td => td.parentNode.remove());
https://jsfiddle.net/t7y6aqc5/

You can use :has() selector to select tr that has td with specific attribute
$("tr:has(td[height='10'])").remove()
$("tr:has(td[height='10'])").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>

without using jquery javascript has also remove()
document.querySelectorAll("td").forEach(el => el.getAttribute("height") === "10" && el.parentNode.remove())
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>

How to delete specific table rows with javascript?

How can I delete specific table rows by giving up the row number in an input field?
The table I want to target: Complete code is linked below.
<table id="uitvoertabel" border="1">
<tr>
<th></th>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Aantal punten</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Cruijff</td>
<td>54</td>
</tr>
<tr>
<td>2</td>
<td>Frans</td>
<td>Bauer</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>Selah</td>
<td>Sue</td>
<td>93</td>
</tr>
</table>
This is the complete code: https://jsfiddle.net/c6oLf8ye/1/

Pass the row number you want to delete like 0,1,2,3...
document.getElementById("uitvoertabel").deleteRow(0);
updated the same in: https://jsfiddle.net/3v2rdbmt/

Floats in Arrays not being compared correctly

I am trying to compare values in an Array (Dynamically added from a website), using Selenium-IDE to do this comparison.
For some reason they are still being compared using string logic - so 58 > 105 (Because 5 > 1)
Below is my code extract that I know to be faulty
<tr>
<td>storeEval</td>
<td>0</td>
<td>i</td>
</tr>
<tr>
<td>while</td>
<td>storedVars['i'] < storedVars['parcTotal']</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>jQuery('article.parcarticle').eq(${i}).attr('id')</td>
<td>articleID</td>
</tr>
<tr>
<td>storeText</td>
<td>css=#${articleID} .table-container tr:nth-child(2) .tbl-price .price</td>
<td>firstParcCost</td>
</tr>
<!--Remove all Commas and Currency Symbol-->
<tr>
<td>echo</td>
<td>${firstParcCost}</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>javascript{storedVars['firstParcCost'].replace(",","").substring(1)}</td>
<td>firstParcCost</td>
</tr>
<tr>
<td>storeEval</td>
<td>javascript{parseInt(storedVars['firstParcCost'])}</td>
<td>firstParcCost</td>
</tr>
<tr>
<td>echo</td>
<td>${firstParcCost}</td>
<td></td>
</tr>
<tr>
<td>push</td>
<td>javascript{storedVars['firstParcCost']}</td>
<td>firstParcCostArray</td>
</tr>
<tr>
<td>echo</td>
<td>${firstParcCostArray}</td>
<td></td>
</tr>
<tr>
<td>gotoIf</td>
<td>storedVars['i']==0</td>
<td>zeroSkip</td>
</tr>
<tr>
<td>echo</td>
<td>javascript{storedVars['firstParcCostArray'][(storedVars['i'])-1] + " is bigger than " + storedVars['firstParcCostArray'][(storedVars['i'])]}</td>
<td></td>
</tr>
<tr>
<td>assertEval</td>
<td>storedVars['firstParcCostArray'][(storedVars['i'])-1] >= storedVars['firstParcCostArray'][(storedVars['i'])]</td>
<td>true</td>
</tr>
<tr>
<td>label</td>
<td>zeroSkip</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>${i}+1</td>
<td>i</td>
</tr>
<tr>
<td>endWhile</td>
<td></td>
<td></td>
</tr>

I've found a work-around which deals with a lack of JS knowledge.
I've moved the parseFloat to the Assertion, and that has appeared to fix things. I've been told that parseFloat only treats it as a float temporarily, and then reverts back to its old data-type

How to bifurcate data in table according to a particular value

In the table I am receiving data from the db, and all the marks have a particular value A or B. According to the value I need to separate the data , if the mark has value A it should be stored under the A and if mark has the value B it should be stored under B. I am not sure how to write the jquery for this problem. I have attached a fiddle along with the post. Showing only the html and the required format of the table.
<table style="width:300px">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>Required Table format
<table style="width:300px">
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
http://jsfiddle.net/yzzp5/

Try this,
<table style="width:300px" id="marksId">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>
Required Table format
<table style="width:300px" id="reqtable">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Your script goes here
$(function(){
var data={'a':[],'b':[]};
$('#marksId tr').each(function(index,tr){
if($(tr).find('td').eq(1).text()=='a'){
data.a.push($(tr).find('td').eq(0).text());
}
if($(tr).find('td').eq(1).text()=='b'){
data.b.push($(tr).find('td').eq(0).text());
}
});
var HTML='';
// alert(JSON.stringify(data))
// if both have equal counts
$.each(data.a,function(idx,val){
HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
});
// alert(HTML);
$('#reqtable').append(HTML);
});
You might need to change this code based on requirement but it will give you an idea to work on
Check Example here also.

jQuery parents("tr") fadeout not working

So I'm trying to create a fadeOut effect of a with class "delete" parent tr element.
Here is my jsfiddle, where you can check it live - http://jsfiddle.net/syTXZ/
and code is here -
HTML -
<table border="1px solid black">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Parent</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>test222</td>
<td>test2</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
<tr>
<td>1</td>
<td>te1t22</td>
<td>tes1t</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
<tr>
<td>3</td>
<td>test2</td>
<td>test</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
</tbody>
</table>​
and js -
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​
but it's not working, any clues? I tried also parent() instead of parents(), but it also didn't work.

Updated with fix: jsFiddle
You were missing );
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​
Should be
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​);

$("body").delegate("a.delete","click",function() {
$(this).parent().parent().fadeOut(300);
}​);

Demo
It should be
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​);