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?

• Phiter: Possible duplicate of make jQuery's `:contains()` select only exact string

Answer 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

• Robert: Hi phiter thank you so much, but I don't know why the code is not work.
• Robert: 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
• Phiter: I will take a look at it.
• Robert: thannk you so much
• Robert: 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.

Answer 2

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/

• Robert: 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: 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