Removing div wrapper container of paragraph field and get only the plain text in twig

Question

I have a paragraph template in my custom theme as paragraph--home-page-carousel.html and when I write like this

<span class="car-spec">{{ content.field_home_slide_snippet[0]|raw }}</span>

I get in HTML source code this

 <div>
    <span class="car-spec">
    FIELD CONTENT
    </span>
</div>

what should I do to remove the div wrapper?

Answer 1

You shouldn't do {{ content.field_home_slide_snippet[0]|raw }}. You should do {{ content.field_home_slide_snippet }} and edit the twig template for field--field-home-slide-snippet.html.twig to have no HTML wrappers. Copy field.html.twig to your theme and edit as needed.

Answer 2

You could use the strip tags filter : {{ some_html|striptags('<span>') }}
Assuming the html is dynamically wrapped by the <div> tag, this will strip the <div> tag and leave the <span> tag.

so

{% set mycontent %}
    {{ content.field_home_slide_snippet }}
{% endset %}
{{ mycontent|striptags('<span>') }}

https://twig.symfony.com/doc/2.x/filters/striptags.html

Answer 3

I think you can use

{{ content.field_home_slide_snippet.0["#context"].value }}

or enable devel module and then use

{{ kint(content.field_home_slide_snippet) }}

to see where is value that you need.