Question

我的网页上有以下代码。

<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>

我需要删除文本而不删除div.editmode。

我使用了这个功能：

$(document).on('click','#phoneDiv',function(){
$("#phoneDiv").not('div.editmode, div.editmode *').remove();
});

但它只删除了所有内容。

为什么这不起作用？这是我的jsfiddle

Answer 1

首先，这不是你应该如何使用.not()。它用于过滤您正在处理的实际JQuery对象中的元素（在您的情况下，您选择#phoneDiv），而不是其子项...

但是，要删除文本，您需要以不同的方式对其进行定位，因为它不是实际的元素。你可以通过.contents()获得它。过滤它以排除div元素，然后执行.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>

Answer 2

您刚删除了整个#phoneDiv，包括其所有子女。

相反，将文本包装在这样的类中：

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

然后删除或隐藏号码

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

Answer 3

为什么不简单地将Skype电话设置为带有课程的div或span并删除其内容？

<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>

然后功能：

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

Answer 4

检查http://jsfiddle.net/ftngmx4j/1/

jQuery not（）函数可以看到与第一个选择器匹配但不与第二个选择器匹配的元素。即。

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

将div与id =＆＃34; phoneDiv＆＃34;匹配但是上课！=＆＃34;编辑模式＆＃34;。你需要使用：

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

另请参阅我在HTML中添加了span标记。这是jQuery将它包含在children（）

中

Jquery不会根据需要删除所有内容

4 个答案: