css don't select child elements

Question

Lets say I have the html as below:

<h3 class="search-result-title">
            This is a test
            <small class="search-result-subtitle">
                Some more explanation
            </small>
        </h3>

How can I filter the text This is a test without the small ?

Edit: I am using it with the symfony Dom Crawler.

So I have filter(a. h3 search-result-title); But I don't want the contents of the small element.

CSS selectors can only select elements (or pseudo-elements). Not text. — Oriol, Dec 08 '15 at 16:15
or you can use jquery .html() function too.. https://api.jquery.com/html/ — Munjal Mayank, Dec 08 '15 at 16:17
Its a css related question. I use it in a goute crawler. I don't want the small element and its contents at all — sanders, Dec 08 '15 at 16:20
Duplicate.. http://stackoverflow.com/questions/3442394/jquery-using-text-to-retrieve-only-text-not-nested-in-child-tags — khollenbeck, Dec 08 '15 at 16:22

m4n0 · Answer 1 · 2015-12-08T16:28:42.493

1

You can extract the content using filter() by giving small element as the parameter and then remove() it.

$('.search-result-title').contents().filter("small").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="search-result-title">
   This is a test
   <small class="search-result-subtitle">
      Some more explanation
   </small>
 </h3>

edited Dec 08 '15 at 16:28

answered Dec 08 '15 at 16:20

m4n0

29,823
27
76
89

1

any idea how to make this work as part of a find? ie `$topcols = $row.find('h4').contents().filter("small").remove();` doesn't work. – Stephen May 27 '17 at 15:07
No idea, Stephen. I posted this answer after much googling and plagiarized from other SO answers. – m4n0 May 27 '17 at 16:50
1

No worries, thanks for the reply :) – Stephen May 27 '17 at 16:56

score 1 · Answer 2 · answered Dec 08 '15 at 16:23

1

You can use this code to get text of h3 element only.

document.querySelector('.search-result-title').firstChild.textContent

answered Dec 08 '15 at 16:23

Alpesh Panchal

1,723
12
9

score 0 · Answer 3 · answered Dec 08 '15 at 16:18

0

wrap This is a test with span tag and user $('h3.search-result-title>span:first-child') to select.

answered Dec 08 '15 at 16:18

Manivannan

3,074
3
21
32

I use it for a crawler I can't alter the html – sanders Dec 08 '15 at 16:20
so you can try `$('h3.search-result-title').firstChild.textContent` – Manivannan Dec 08 '15 at 16:34

score 0 · Answer 4 · edited May 23 '17 at 10:27

0

I saw that you were using jQUery so I found this : text without child

You can do something like this :

$.fn.ignore = function(sel){ return this.clone().find(sel||">*").remove().end(); }; console.log($("h3.search-result-title").ignore("small").text().trim());

this will return 'This is a test'

Hope it helps !

edited May 23 '17 at 10:27

Community

1
1

answered Dec 08 '15 at 16:20

Pipo

193
1
1
9

score 0 · Answer 5 · answered Dec 08 '15 at 16:24

0

You can use .filter() the .contents():

var txt = $('h3.search-result-title').contents().filter(function(){
    return this.nodeType == 3; 
 });

answered Dec 08 '15 at 16:24

Jai

74,255
12
74
103

css don't select child elements

5 Answers5