CODEWITHSUNDEEP
javascripthtmljquery
tariqul anik
tariqul anik

Reputation: 324

Remove a specific word from a div in jquery

checked input

<input id="add_stop" name="attach_img" type="checkbox" class="required custom-control-input">

Here is my div 

<div class="emojionearea-editor">
 Hello World.  STOP to opt out 
</div>

I want to remove just STOP to opt out if it exists in the inner HTML of div.

here is my jquery code

$('#add_stop').change(function (event) {
    if ($(this).is(':checked')) {
        if ($('.emojionearea-editor').html().indexOf("STOP to opt out") != -1) {

        } else {
            $('.emojionearea-editor').append('STOP to opt out ');
        }


    } else {
        var name = $('.emojionearea-editor').html();

        /* remove code should be here.... */

        alert(name);
    }
});

Here I want to add when checked. I append the text when it not exist. Now I want to remove text if it exists. Now my question is How can I remove the existing text from inner Html??

Upvotes: 0

Views: 674

Answers (4)

Daniel Osmond
Daniel Osmond

Reputation: 31

I changed your JQuery code a bit

$("#add_stop").change(function() {
  if(this.checked){
    if(!$(".emojionearea-editor").html().includes("STOP to opt out ")){
      $(".emojionearea-editor").append("STOP to opt out ")
    }
  }else{
        var name = $('.emojionearea-editor').text();

        $('.emojionearea-editor').text(name.replace("STOP to opt out ", ""))

        alert(name);
  }
})

This should allow you to add and remove the "STOP to opt out"

Here's a codepen with it working

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Is this what you are looking for?

$('#add_stop').change(function (event) {
var keyword = 'STOP to opt out';
    if ($(this).is(':checked')) {
        if ($('.emojionearea-editor').html().indexOf(keyword) != -1) {

        } else {
            $('.emojionearea-editor').append(keyword);
        }

    } else {
        var name = $('.emojionearea-editor').text().replace(keyword,"");
        alert(name);
    }
});

I've made the words you want to replace into a variable. That way when you chance the text in the variable it will apply to every place where it's used.

Please note that you should use .text() and not .html() since the .html() will include all html code in that object.

Demo

$('#add_stop').change(function (event) {
var keyword = 'STOP to opt out';
    if ($(this).is(':checked')) {
        if ($('.emojionearea-editor').html().indexOf(keyword) != -1) {

        } else {
            $('.emojionearea-editor').append(keyword);
        }

    } else {
        var name = $('.emojionearea-editor').text().replace(keyword,"");
        alert(name);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="add_stop" name="attach_img" type="checkbox" class="required custom-control-input">


<div class="emojionearea-editor">
 Hello World.  STOP to opt out 
</div>

Upvotes: 1

ABGR
ABGR

Reputation: 5205

var name = $('.emojionearea-editor').html().replace("STOP to opt out", "");

$('.emojionearea-editor').html(name)

Upvotes: 1

Danny
Danny

Reputation: 31

html() function takes one parameter to set inner Html of the DOM. So like this:

var text = $('.emojionearea-editor').html();
text = text.replace("STOP to opt out", "");
$('.emojionearea-editor').html(text);

Upvotes: 1

Related Questions