javascript - Jquery 没有按要求删除所有内容

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>