Get text without certain element included using JQuery [duplicate] - javascript

This question already has answers here:
Using .text() to retrieve only text not nested in child tags
(30 answers)
Closed 1 year ago.
So I have this table below. And I want to get the text inside td.am-receipt-price but without getting the span text included.
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price"><del>price 1</del></span>
price 2
</td>
</tr>
</tbody>
</table>
console.log ( $(".am-receipt-price").text() ) would also return the text inside the span. I have tried .remove("span") but it wont work.
Am I missing any selector that I have not tried yet? thanks in advance.

The simplest solution would be to add another element around the target node and use a selector to retrieve it.
Assuming you cannot amend the HTML, then you can use contents() and filter() on the parent td to target the node and read its textContent.
let $td = $('.am-receipt-price');
let nodes = $td.contents().filter((i, n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== '');
console.log(nodes[0].textContent.trim());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price">
<del>price 1</del>
</span>
price 2
</td>
</tr>
</tbody>
</table>

An alternative to the already provided .contents() solution (if you need/want an alternative) is to use .clone() and .remove(), where you copy the html into a variable then you can do what you want with it without changing the original.
var price = $("td.am-receipt-price").clone();
price.find("span").remove();
console.log(price.text().trim())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price">
<del>price 1</del>
</span>
price 2
</td>
</tr>
</tbody>
</table>
It may be that your .remove("span") just had the wrong syntax:
$("td.am-receipt-price").find("span").remove()
would change the original DOM nodes.

Related

Get source from a <tr> element with Jquery [duplicate]

This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 4 years ago.
I'm trying to get the source of a tr element using JQuery.
For this I'm using the selector below :
$('#mygrid > table tr')
On console I can see this selector returns me this :
<tr class="red-background">
<td class="date">10/07/2018</td>
<td class="hora">13:09</td>
</tr>
The return is actually an object, not a string :
typeof $('#grid-historicos > table tr')
"object"
So I can't use the method .html()
So what is the right way to get the HTML source of the element? I need only this part as a string :
<tr class="red-background">
Working fiddle.
You need to select the tr line you want to target using the index [0] in my example, then select the outerHTML and split the result then finally get the first line :
console.log($('#mygrid > table tr')[0].outerHTML.split('\n')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mygrid">
<table style="width:100%">
<tr class="red-background">
<td class="date">10/07/2018</td>
<td class="hora">13:09</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>

Finding a certain number in html and replace it with custom text

So, I have a table and there is a colum called value with different numbers that varies from 0 to 2.
<column>Values<column>
<td>0</td>
<td>2</td>
<td>0</td>
Yes, I know that something like does not exist, it was just for sake of example.
But the real question is, how can I with help of jquery find those numbers and replace it with something else.. for example
if(td == 1){
replace 1 with "Hello"
}
Use contains() to get td which have similar text and replace text using .text()
$("td:contains('1')").text("hello");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Well, it depends...
If you are refering to ALL the content of the cell as a numeric value, you can do this (in JS)
if(Number($(td).html().trim()) == number_to_replace){
$(td).html(text_for_replacement);
}
where "td" could referer to the cell as a DOM variable or could be a string selector
Can you give your elements Id's? This may make your code more readable and maintainable, and will remove the dependency between the value you are trying to replace and the code that is looking for it.
If you can use Id's, then you can use jQuery selectors to get hold of the element and then, depending on the element type, set the text or innerHtml to your required values.
Foe example;
$( document ).ready(function() {
$('#col1').text('hello');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td id="col1">1</td>
<td id="col2">2</td>
<td id="col3">3</td>
</tr>
</table>
or JsFiddle.net
Use :contains() pseudo-class to select all td which contains 1 and then use text() with callback to check content is exactly 1 and update.
$('td:contains(1)').text(function(i, v) {
return $.trim(v) == '1' ? 'hello' : v;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>11</td>
</tr>
</table>

Find element by class and custom attribute value (then update it)

Using jQuery I want to add some HTML to a specific <td> whose attribute matches the value I have.
For example I have a value '2015-02-01', I want to find/search the <td> which had the attribute 'data-date="2015-02-01"' and append HTML to the matched value, which in this example is <td>1</td>
<div class="fc-content-skeleton">
<table>
<thead>
<tr>
<td data-date="2015-02-01" class="fc-day-number">1</td>
<td data-date="2015-02-02" class="fc-day-number">2</td>
<td data-date="2015-02-03" class="fc-day-number">3</td>
<td data-date="2015-02-04" class="fc-day-number">4</td>
<td data-date="2015-02-05" class="fc-day-number">5</td>
<td data-date="2015-02-06" class="fc-day-number">6</td>
<td data-date="2015-02-07" class="fc-day-number">7</td>
</tr>
</thead>
</table>
</div>
I dont have any sample code as I am stuck really on how to approach this.
// This only gives me the value of the attribute
$this.parent().find('.fc-day-number').attr('data-date');
Just use attribute selector whose syntax is [attributeName[=attributeValue]]
var value = "2015-02-01";
$('[data-date="' + value + '"]').append('html here');
Note, that you can apply the above selector in find, closest and other such jQuery methods that accept a CSS selector.
Use jQuery Attribute Equals selector
then use jQuery html() to add content
or use jQuery append() to append content
here is the html() fiddle
I think is that you want :
var date = "2015-02-03";
$("td[data-date='" + date + "']").append(date);
Solution on this url : http://jsfiddle.net/g09jvfxy/1/

Removing some text data in HTML file

I am working on visualforce pages. below is given the part of HTML file code that has been generated after executing the apex code.
<table class="detailList" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr></tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"> userName </td>
<td class="labelCol"></td> <td class="dataCol"></td>
</tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"></td>
<td class="labelCol"></td>
<td class="dataCol"></td>
</tr>
</table>
I want to remove the userName anchor tag from this page which is coded in line# 6 whose class Name is "dataCol col02", and there is another anchor tag with the same class name "dataCol col02" at line# 11. keep it in mind that this html is generated by executing an APEX code. Kindly guide me how could i remove the anchor tag at line#6 only..
You can use find, first and remove methods.
$('.dataCol.col02').first().find('a').remove();
In case that you want to remove the userName textNode:
$('.dataCol.col02').first().contents().filter(function () {
return this.nodeType === 3;
}).remove();
Removing all the contents:
$('.dataCol.col02').first().empty();
Use this
$(function(){
$(".dataCol.col02:first a").remove();
});
Demo
You could do something like:
var anchor = document.getElementsByClassName("col02")[0] //select first matching 'col02'
.getElementsByTagName("a")[0] //select first matching <a>
anchor.parentNode.remove(anchor)
You can see it running here: jsfiddle
This assumes of course you only ever want to remove from the first instance of something with class='col02', so is not hugely robust. I imagine the fact it's generated means you can't put in more helpful class/id attributes?
On the flipside unlike the other answers it doesn't depend on jquery : )
Try this -
$('td.dataCol.col02').eq(0).find('a').remove();
or if you would like to empty that td -
$('td.dataCol.col02').eq(0).empty();
$("table .dataCol.col02:first a").remove();
Try this:
$("tr:eq(1) > td:eq(1)").remove()
Do this >>
$(".col02:first > a").remove();
Example Fiddle

Hide table row if one of its columns is empty using CSS [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
hide row if it contains empty columns
Can the row containing empty cell in this table be hidden using CSS.. I have tried jQuery and its not working right now..
this is what I used and it doesn't do anything!
$('.EventDetail tr').each(function(){
if ($('td:empty',this).length > 0))
$(this).hide();
});
There ain't nothing wrong with this piece of jQuery, is there? I would like to see if we can do display:none for the selected row? Is it something achievable using CSS?
<table cellpadding="10" class ="EventDetail">
<tr>
<td class="TableFields"><em>Who Should Enroll?:</em></td>
<td>Everyone 18 and older who would like to attend</td>
</tr>
<tr>
<td class="TableFields"><em>Handicapped Access:</em></td>
<td>Yes</td>
</tr>
<tr>
<td class="TableFields"><em>Parking Notes:</em></td>
<td></td>
</tr>
<tr>
<td class="TableFields"><em>Instructor:</em></td>
<td>John Filler</td>
</tr>
</table>
This selector should do it...
$('.EventDetail tr:has(td:empty)').hide();
jsFiddle.
The :empty selector looks for elements with no child nodes. If it is possible you may have whitespace there, but you still consider it empty, try something such as...
$('.EventDetail tr').filter(function() {
return $(this).find('td').filter(function() {
return ! $.trim($(this).text());
}).length;
}).hide();
jsFiddle.

Categories

Resources