Hide Part Of text In same <p> tag-CodePudding

Say for example, I have the following code

<p >
"First part of text"
<span id="divider"></span>
"Second part of text"
</p>

How do I hide the second part of the text?

CodePudding user response：

JS implementation:

document.getElementById("divider").parentNode.removeChild(document.getElementById("divider").nextSibling);

<p >
"First part of text"
<span id="divider"></span>
"Second part of text"
</p>

This will remove the immediate next node after the divider.

If you want all the elements and nodes after the divider to be removed:

while (document.getElementById("divider").nextSibling || document.getElementById("divider").nextElementSibling) {
  if (document.getElementById("divider").nextSibling) {
    document.getElementById("divider").parentNode.removeChild(document.getElementById("divider").nextSibling);
  } else {
    document.getElementById("divider").nextElementSibling.remove();
  }
}

<p >
  "First part of text"
  <div id="divider"></div>
  text node
  <p>paragrah</p>
  <span>text in span</span>
  text node
</p>

CodePudding user response：

Does this work?

<p >
"First part of text"
<span id="divider"></span>
</p>

CodePudding user response：

Instead of using a divider consider putting the text inside the span

<p >
"First part of text"
<span>"Second part of text"</span>
</p>

with that you can now use either css or javascript on it like so:

css:

.text-content span {
    display: none;
}

js:

let text = document.querySelector(".text-content span");
text.style.display = "none";

If you have multiple instances of this you can use an id instead of a class like usual and hide it based on events or certain conditions as you please.

CodePudding user response：

Thank you for the answers. What I want is to add a read more button after a paragraph. I just added the following css.

p{
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 15; 
           line-clamp: 15; 
   -webkit-box-orient: vertical;
}