jQuery / Remove
without losing hyperlink or read more goes below text

Question

Any ideas to keep 'read more' next to text and remove 'p' from var content = $(".myClass p").html(); without losing hyperlink ? Thanks a lot..

      var show_char = 280;
      var ellipses = "... ";
      var content = $(".myClass").html();
      if (content.length > show_char) {
         var a = content.substr(0, show_char);
         var b = content.substr(show_char - content.length);

         var html = a + "<span class=\'abc\'>" + ellipses + "</span><span class=\'abc\' style=\'display:none\'>" + b + "</span><a class=\'read-more\' href=\'#\'>Read more</a>";        
        $(".myClass").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".read-more").text() == "Read more" ? $(".read-more").text(" Read less") : $(".read-more").text("Read more");     
         $(".myClass .abc").toggle();
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myClass">
  <p><a href="https://stackoverflow.com/">stackoverflow</a> is a question and answer site for professional and enthusiast programmers. It features questions and answers on a wide range of topics in computer programming. It was created to be a more open alternative to earlier question and answer sites such as Experts-Exchange.</p>
</div>

The link is part of the `p` tag. What is the exact end result you want? A link with no parent `p` or a `p` consisting of only the link? — Jon P, Jun 04 '21 at 00:07
I wonder how to to remove 'p' from var content = $(".myClass p").html(); without read more goes below text as it is now, and without losing hyperlink, because if I add p on var content I lose hyperlink on my program.. — , Jun 04 '21 at 00:24

Avinash · Accepted Answer · 2021-06-04T02:55:02.163

Just one small thing to do and this should work fine. You can include The child combinator ( > ) to capture p tag within .myClass while omitting to write the tag in your third line, i.e. var content = $(".myClass").html();
I hope this helps! Feel free to mark the answer as accepted if it helped solving you problem by clicking ✓ on the left of this answer

var show_char = 280;
      var ellipses = "... ";
      var content = $(".myClass >*").html(); 
      
      if (content.length > show_char) {
        var a = content.substr(0, show_char);
        var b = content.substr(show_char - content.length);
        var html = a + "<span class=\'abc\'>" + ellipses + "</span><span class=\'abc\' style=\'display:none\'>" + b + "</span><a class=\'read-more\' href=\'#\'>Read more</a>";
        $(".myClass").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".read-more").text() == "Read more" ? $(".read-more").text(" Read less") : $(".read-more").text("Read more");     
         $(".myClass .abc").toggle();
      });

html {
  font-size: 18px;
  font-family: sans-serif
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="myClass">
  <p><a href="https://stackoverflow.com/">stackoverflow</a> is a question and answer site for professional and enthusiast programmers. It features questions and answers on a wide range of topics in computer programming. It was created to be a more open alternative to earlier question and answer sites such as Experts-Exchange.</p>
</div>

thanks ,but the thing is that I don 't want 'p' on var content , that's the problem. i.e var content = $(".myClass p").html() — , Jun 04 '21 at 01:53
If writing "p" is the challenge, and there is only one this para in the DIV then you may try doing `var content = $(".myClass >*").html();` as my best guess. Honestly, unless I understand your challenge in writing "p", it would be hard for me (at least) to reach to an acceptable solution. Can you elaborate a bit on this please! — Avinash, Jun 04 '21 at 01:58
The last answer works fine for me! There is nothing else to change on code only this--> var content = $(".myClass >*").html(); Update my code and change only this >* and I will rate it with V.. Thanks a lot — , Jun 04 '21 at 02:35
Done @programmer123, revised the answer. PS- I am happy that it helped. — Avinash, Jun 04 '21 at 02:55

jQuery / Remove without losing hyperlink or read more goes below text

1 Answers1

jQuery / Remove
without losing hyperlink or read more goes below text