CODEWITHSUNDEEP
jquery
Kamal
Kamal

Reputation: 2180

remove any word using remove() in jQuery

I want to make a function that remove any specific word in the content

I got this code

jQuery

<script>
$(document).ready(function(){
    $('#cl').click(function(){
        $('div').remove(':contains("kamal")');
    });
    
    
})
</script>

HTML

<div>asdjh alsdhj kamal ljkahsdhasd lakshd kamal</div>
<div ><a href="#" id="cl">click</a></div>
<div>asdjh alsdhj  ljkahsdhasd lakshd </div>

but its remove whole div contains kamal I want to remove only this word from my content not the whole div you can also see online demo of my code here

Upvotes: 5

Views: 13845

Answers (7)

Daljit
Daljit

Reputation: 695

Since text() gets the value, and text( "someValue" ) sets the value, you just place one inside the other. This should work for you

https://jsfiddle.net/nnsP4/

$(document).ready(function() {
  $('#cl').click(function(){
      $('div:contains("kamal")').each(function(){
         var text = $(this).text();
         var newValue =  text.replace('kamal', '');
          $(this).text(newValue);
      });
   });
});

Upvotes: 0

jbduzan
jbduzan

Reputation: 1126

The remove function remove a node from the DOM not only her content

try $('div).text().replace('kamal','');

edit : this one is working

$('div').text($('div').text().replace('kamal', ''));

https://jsfiddle.net/qH4CJ/

Upvotes: 0

kamui
kamui

Reputation: 3419

This should work for you

 <script>
 $(document).ready(function(){
     $('#cl').click(function(){             
        var ka = /kamal/gi;

        $('div').contents().each(function() {

            // this.nodeType === 3 selects the text nodes section of the DOM
            // then ka.test(this.nodeValue) performs a regex test on the text 
            // in the node to see if it contains the word "kamal" with the 
            // global /g flag to search the entire string and /i to be case 
            // insensitive

            if (this.nodeType === 3 && ka.test(this.nodeValue)) {
                this.nodeValue = this.nodeValue.replace(ka, '');
            }
            // this section catches the text nodes within the child and 
            // performs the same operation
            $(this).contents().each(function() {
                if (this.nodeType === 3 && ka.test(this.nodeValue)) {
                     this.nodeValue = this.nodeValue.replace(ka, '');
                }
            })        
        })

     })
 });
 </script>

edit: changed the simple string replace with a global regex replace so one click replaces all instances. see JSFiddle for a working example.

edit: Based on the comment from @Alnitak who was correct in noting that the previous version of the code removed whole child elements containing the text not just the text, the new updated version does not disrupt the DOM and removes all instances of the key word "kamal" see updated JSFiddle.

Upvotes: 2

Alnitak
Alnitak

Reputation: 339816

The correct way to do a read-modify-write on an element is to use jQuery's "function parameter" methods:

$('div:contains(kamal)').filter(function() {
    return $(this).children().length === 0;  // exclude divs with children
}).text(function(index, text) {
    return text.replace(/kamal/g, '');
});

this avoids calling .text() twice, and also simplifies the code logic.

Note that you may get unusual results if you have nested div tags, since the :contains() pseudo selector considers all descendants, not just direct children, and does it top-down rather than bottom-up. This is why the above solution includes the initial .filter call, to ensure that only leaf nodes in the DOM tree are considered.

An alternative method is to use .contents and look directly at DOM text nodes:

var re = /kamal/gi;

$('div').contents().each(function() {
    if (this.nodeType === 3 && this.nodeValue.match(re)) {
        this.nodeValue = this.nodeValue.replace(re, '');
    }
})​

See https://jsfiddle.net/alnitak/eVUd3/

EDIT second example updated to use string.match(regex) instead of regex.test(string).

Upvotes: 4

Thulasiram
Thulasiram

Reputation: 8552

Use this:

 $('#cl').click(function(){
        $('div').each(function(){
            $(this).text($(this).text().replace(/kamal/g, '');
          });
 });

Upvotes: 0

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

You can use replace method

$('#cl').click(function(){
        $('div').text($('div').text().replace('kamal',''));
});

Upvotes: -1

elclanrs
elclanrs

Reputation: 94101

var $div = $('div');
$div.text($div.text().replace('yourword', ''))

Upvotes: 1

Related Questions