CODEWITHSUNDEEP
javascriptjquery
PHPer
PHPer

Reputation: 664

Remove Everything including text after an element

I need a quick solution to something seemingly simple:

I want to removed everything, including text, after a specific element in a html element.

I have : 

<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

I want to delete everything after "classone" element within that main container.

I have tried $('.main-container').nextAll().remove(); but that removes only the html.

Upvotes: 0

Views: 84

Answers (4)

AvcS
AvcS

Reputation: 2323

Remove last node from the parent node, until the node you want becomes the last node of parent node.

function removeAllNodesAfter (node) {
    const parentNode = node.parentNode;
    while (parentNode.lastChild !== node) {
        parentNode.removeChild(parentNode.lastChild);
    }
};

removeAllNodesAfter($('.classone')[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

Upvotes: 1

Cris Soares
Cris Soares

Reputation: 627

Here's a solution using no loop:

$(document).ready(function() {
    'use strict';
  const content = $(".main-container").html();
  const element = $(".main-container .classone").html();
  const index = content.indexOf(element);
  $(".main-container").html(content.substr(0, index + element.length));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

Upvotes: 0

guest271314
guest271314

Reputation: 1

while they exist in the DOM you can remove .classone .nextSibling.

const one = document.querySelector(".classone");

while (one.nextSibling) one.parentElement.removeChild(one.nextSibling);

console.log('done');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="main-container">
Some text and <a href="" class="classone">SOME HTML</a>. 
I also have someother text, and some more <b>html</b> 
</div>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You might make use of .contents():

$(function () {
  var FoundClass = false;
  
  $(".main-container").contents().filter(function (s, el) {
    if ($(el).hasClass("classone")) {
      FoundClass = true;
      return false;
    }
    return FoundClass;
  }).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  Some text and <a href="" class="classone">SOME HTML</a>. I also have someother text, and some more <b>html</b>
</div>

This is kinda slightly hacky because I use a flag FoundClass. If there's a better solution, I am always welcome. This is what I came up with jQuery's .contents().

Upvotes: 1

Related Questions