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

Jquery does not remove all content as desired

本文关键字：删除 Jquery      更新时间：2023-09-26

我的网页上有以下代码。

<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

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

但是，要删除文本，您需要以不同的方式定位它，因为它实际上不是一个元素。你可以通过.contents()得到它。筛选它以排除div 元素，然后执行.remove()

更新的 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>

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

相反，将文本包装在如下所示的类中：

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

然后仅删除或隐藏号码

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

为什么不简单地将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('');
});

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

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

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

将div 与 id="phoneDiv" 匹配，但类 ！="编辑模式"。您需要使用：

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

另请参阅我已将 span 标记添加到 HTML。这是为了让jQuery将其包含在child（）中

相关文章：