Replace text issue in javascript

Question

I want to check if the text exist and remove it. I need to find if the text exist and remove the parent items. For example If the the With Name + Date exist then remove :

<dt>Font</dt>
<dd>Arial </dd>

Another example if the With Name + Date + Time exist then remove:

<dt>Font</dt>
<dd>Comic Sans </dd>

My code:

jQuery( document ).ready(function() {
  if (jQuery('.item-options dd:contains("With Name")').length > 0)
  {
    var parent = jQuery('.item-options dd:contains("With Name")').parent('dl');
    jQuery(parent).find('dt:contains("Font")').html('');    
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="item-options">
  <dt>Radio test</dt>
  <dd>With Name </dd>
  <dt>Font</dt>
  <dd>no font selected </dd>
</dl>
<dl class="item-options">
  <dt>Radio test</dt>
  <dd>With Name + Date</dd>
  <dt>Font</dt>
  <dd>Arial </dd>
</dl>
<dl class="item-options">
  <dt>Radio test</dt>
  <dd>With Name + Date + Time</dd>
  <dt>Font</dt>
  <dd>Comic Sans </dd>
</dl>

My issue is because With Name exist in all and my javascript is apply to all. How I can make the javascript to search exactly?

Possible duplicate of [make jQuery's \`:contains()\` select only exact string](http://stackoverflow.com/questions/15364298/make-jquerys-contains-select-only-exact-string) — Phiter, Apr 15 '16 at 17:14

score 1 · Accepted Answer · edited May 23 '17 at 10:28

1

You can use jQuery's filter function. The contains selector will not try to get an exact match, but, like the name says, a string that contains the desired text.

jQuery( document ).ready(function() {
  if (jQuery('.item-options dd').filter(function() {
    return jQuery(this).text() === "With Name";
  }).length > 0)
  {
    var parent = jQuery('.item-options dd:contains("With Name")').parent('dl');
    jQuery(parent).find('dt:contains("Font")').html('');    
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="item-options">
  <dt>Radio test</dt>
  <dd>With Name </dd>
  <dt>Font</dt>
  <dd>no font selected </dd>
</dl>
<dl class="item-options">
  <dt>Radio test</dt>
  <dd>With Name + Date</dd>
  <dt>Font</dt>
  <dd>Arial </dd>
</dl>
<dl class="item-options">
  <dt>Radio test</dt>
  <dd>With Name + Date + Time</dd>
  <dt>Font</dt>
  <dd>Comic Sans </dd>
</dl>

Looks ugly, but works.

Source

edited May 23 '17 at 10:28

Community

1
1

answered Apr 15 '16 at 17:12

Phiter

14,570
14
50
84

Hi phiter thank you so much, but I don't know why the code is not work. – Robert Apr 15 '16 at 17:18
Hi Phiter Fernandes can you tell what is wrong with this code and why Font text is not removed? I try it in my page too and is the same like here, if you press Run code snippet you will see that the Font is still there. Thank you – Robert Apr 18 '16 at 11:08
I will take a look at it. – Phiter Apr 18 '16 at 11:19
thannk you so much – Robert Apr 18 '16 at 11:24
Phiter Fernandes I manage to make it work but this code will remove Font from everywhere, I need to be removed only in the item where exist just the text With Name simple. – Robert Apr 18 '16 at 11:46

score 0 · Answer 2 · answered Apr 15 '16 at 17:38

0

if you know the html architecture or otherwise remove whatever you want.i hope this will help you.

$( document ).ready(function() {
 if ($('.item-options dd:contains("With Name")').length > 0)
  { 
   var parent = $('.item-options');
   var children = $('.item-options').find("dd");
   $(children).each(function(i,e){
    if(~$(e).text().indexOf("With Name + Date + Time")){
     $(e).nextAll().remove();
    }
   else if(~$(e).text().indexOf("With Name + Date")){
     $(e).nextAll().remove();
    }
  });

 }
});

https://jsfiddle.net/atg5m6ym/3270/

answered Apr 15 '16 at 17:38

DK3

403
2
10

Hi thank you for your answer, but what happens if the With Name is not exist and there is only With Name + Date + Time? I try and if With Name is not exist is remove the script remove everything that contain With Name – Robert Apr 16 '16 at 08:37
Hi, can you tell me how I can remove only the text Font? in your code? instead this $(e).nextAll().remove(); I need to remove only text Font – Robert Apr 18 '16 at 12:16

Replace text issue in javascript

2 Answers2