CODEWITHSUNDEEP
javascriptdom
marcusk7
marcusk7

Reputation: 107

How to remove a parent and its children if child contains text

I've searched through a number of similar issues, but can't seem to make this work.

Here's my HTML:

 <div class="main">
    <p class="nameLink">name1</p>
    <p class="someClass"></p>
  </div>

  <div class="main">
    <p class="nameLink">name2</p>
    <p class="someClass"></p>
  </div>

I would like to remove the div that contains a specific name, such as "name2". HTML is currently being appended from a javascript file and the names are coming from a variable.

Here is what I've tried in javascript:

var deleteName = "name2";
    $('.main p.nameLink').each(function() {
        if ($(this).text() == deleteName) {                    
          $('.main').has('p:contains(deleteName)').remove()
            return;
      }
    });

I just can't seem to remove the div containing the specific text. Your help is appreciated. Thanks.

Upvotes: 1

Views: 618

Answers (3)

Kaddath
Kaddath

Reputation: 6151

Your code is a little bit overkill, you can use only selectors to remove it, no use to loop over it with a each(), unless you want to do specific actions with the p element:

var deleteName = "name2";
$('.main').has('p.nameLink:contains(' + deleteName + ')').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <p class="nameLink">name1</p>
  <p class="someClass"></p>
</div>

<div class="main">
  <p class="nameLink">name2</p>
  <p class="someClass"></p>
</div>

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

By including deleteName inside your single quotes, it's looking for a p that contains the literal text "deleteName", not "name2".

Try this: 

var deleteName = "name2";
    $('.main p.nameLink').each(function() {
        if ($(this).text() == deleteName) {                    
          $('.main').has('p:contains(' + deleteName + ')').remove();
            return;
        }
});

Take a peak at what your code actually evaluates to (the commented portion):

Your snippet:

  $('.main').has('p:contains(deleteName)').remove()
//$('.main').has('p:contains(deleteName)').remove()
//Searching for text: deleteName

Correction:

  $('.main').has('p:contains(' + deleteName + ')').remove();
//$('.main').has('p:contains(name2)').remove();
//Searching for text: name2

Upvotes: 2

Seth
Seth

Reputation: 10454

You're forgetting to interpolate the deleteName variable. Currently as it is, you're checking any paragraph tag that contains the text deleteName and instead of passing through the value name2.

You need to use string concatenation. For example: 'string ' + 1 + ' something', yields 'string 1 something'.

Here's your code working: 

var deleteName = "name2";
$('.main p.nameLink').each(function() {
  if ($(this).text() == deleteName) {
    $('.main').has('p:contains(' + deleteName + ')').remove()
    return;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <p class="nameLink">name1</p>
  <p class="someClass"></p>
</div>

<div class="main">
  <p class="nameLink">name2</p>
  <p class="someClass"></p>
</div>

Upvotes: 0

Related Questions