Jquery Does Not Remove All Content As Desired

I have the following code on my web page.

+7 (999) 999-9999

Solution 1:

First of all, that's not how you should use .not(). It is used to filter the elements in the actual JQuery object you're dealing with (in your case, you're selecting #phoneDiv), not its children...

But, to remove the text, you'd need to target it in a different way, since it is not actualy an element. You can get it through .contents(). Filter it to exclude the div element, and then perform the .remove()

Updated JsFiddle

$(document).on('click','#phoneDiv',function(){
    $("#phoneDiv").contents().filter(function() {
        return (!$(this).is(".editmode"));
    }).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="phoneDiv">+7 (999) 999-9999
    <div class="editmode">
        <input type="text" placeholder="Телефон" value="+7 (999) 999-9999" id="editPhone" name="editPhone" class="text key" />
    </div>
</div>

Solution 2:

You just removed the whole #phoneDiv, including all its children.

Instead, wrap the text in a class like this:

<div class="number">
    +7 (999) 999-9999
</div>

Then remove or hide the number only

$(".number").remove();

Solution 3:

Why don't you simply set that Skype telephone into a div or span with a class and erase its content?

<div id="phoneDiv">
    <div class="js-erase-me">+7 (999) 999-9999</div>
    <div class="editmode">
        <input type="text" placeholder="Телефон" value="+7 (999) 999-9999" id="editPhone" name="editPhone" class="text key">
    </div>
</div>

And then the function:

$(document).on('click','#phoneDiv',function(){
    $(".js-erase-me").html('');
});

Solution 4:

Check http://jsfiddle.net/ftngmx4j/1/

The jQuery not() function sees for elements that match the first selector but not the second selector. i.e.

$("#phoneDiv").not('div.editmode, div.editmode *')

matches div with id="phoneDiv" but class !="editmode". You need to use:

$("#phoneDiv").children().not('div.editmode').remove();

Also see I have added a span tag to the HTML. That is for jQuery to include it in children()

Share