Javascript 如何删除动态添加的元素？

我有一段代码，它在文本框的正下方添加了dynamic div，但我想在用户删除字符后将其删除：

下面的代码不起作用，我看不出我做错了什么

见下面的代码：

    $(document).ready(function () {

        $("#searchcontent").keypress(function (e) {
            var dvSearch = $('<div />');
            dvSearch.attr('dvSearch', '1');

            if ($("#searchcontent").val().length >= 2) {
                var pos = $(this).position();
                dvSearch.html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>").css({
                    top: pos.top + $(this).height() + 18,
                    left: pos.left,
                    width: '300px',
                    position: 'absolute',
                    'background-color': 'Yellow'
                }).insertAfter($(this));
            }
            else {
                $("div[dvSearch='1']").remove();
            }
        });

    });

$（文档）.ready（函数（）{
$（“#搜索内容”）。按键（功能（e）{
var-dvSearch=$（''）；
attr（'dvSearch'，'1'）；
if（$（“#searchcontent”）.val（）.length>=2）{
var pos=$（this.position（）；
html（“ffff:eeee:ggggg:”）.css({
顶部：pos.top+$（此）.height（）+18，
左：位置左，
宽度：“300px”，
位置：'绝对'，
“背景色”：“黄色”
})。在（$（本））之后插入；
}
否则{
$（“div[dvSearch='1']）；
}
});
});

问题在于，在更新实际值之前，按键操作会运行。因此，如果文本框显示“hi”，然后按backspace，则select的值仍然是“hi”

改变

$("#searchcontent").keypress(function(e){

到

它解决了这个问题

---

问题在于，当按下backspace时，.keypress（）不会启动。改为使用.keyup（）。

始终运行html选择器不是一个好方法。尤其是全球性的。将链接保存到节点并将其删除

$(document).ready(function () {
   $("#searchcontent").keyup(function (e) {
        var el = $(this),
            // getting link
            dvSearch  = el.data("searchBlock"),
            // getting passed state
            dvPassed = el.data("searchPassed"),
            pos;

        // setting if first run
        if (!dvSearch) {
            dvSearch = $("<div/>");
            // for what is it ?
            dvSearch.attr('dvSearch', '1'); 

            el.data("searchBlock", dvSearch);
            el.data("searchPassed", false);
        }




        if (el.val().length >= 2) {
            pos = el.position();

            // Inserting element if need
            if (!dvPassed) {
                dvSearch.insertAfter(el);
                el.data("searchPassed", true);
            }

            // setting html
            dvSearch.html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>").css({
                top: pos.top + el.height() + 18,
                left: pos.left,
                width: '300px',
                position: 'absolute',
                'background-color': 'Yellow'
            });
        }
        else {
            dvSearch.remove();
            el.data("searchPassed", false);
        }
    });

});

$（文档）.ready（函数（）{
$（“#搜索内容”）.keyup（函数（e）{
var el=$（此），
//获取链接
dvSearch=el.数据（“搜索块”），
//通过状态
dvPassed=el.数据（“searchPassed”），
销售时点情报系统；
//设置是否首次运行
如果（！dvSearch）{
dvSearch=$（“”）；
//为什么呢？
attr（'dvSearch'，'1'）；
el.数据（“搜索块”，dvSearch）；
el.数据（“搜索已通过”，错误）；
}
如果（el.val（）.length>=2）{
位置=标高位置（）；
//如果需要，插入元素
如果（！dvPassed）{
dvSearch.insertAfter（el）；
el.数据（“搜索已通过”，真实）；
}
//设置html
html（“ffff:eeee:ggggg:”）.css({
顶部：位置顶部+标高高度（）+18，
左：位置左，
宽度：“300px”，
位置：'绝对'，
“背景色”：“黄色”
});
}
否则{
dvSearch.remove（）；
el.数据（“搜索已通过”，错误）；
}
});
});

我建议只需准备一个容器，即可接收HTML中的结果内容。然后，您可以通过在那里添加结果或清空该容器来减少问题。在原始代码中，您在每个

keypress

事件上不断添加

div

元素

此外，正如其他人所提到的，您将希望使用

.keyup（）

而不是

.keypress（）

，以确保事件触发时输入的值是正确的

HTML

<input type="text" id="searchcontent" name="searchcontent" class="txtSearch" maxlength="30" />
<div id="searchresult"></div>

JS

$(document).ready(function() {
    $("#searchcontent").keyup(function(e) {
        if ($("#searchcontent").val().length >= 2) {
            var pos = $(this).position();
            $("#searchresult").html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>");
        }
        else {
            $("#searchresult").empty();
        }
    });
});

$（文档）.ready（函数（）{
$（“#搜索内容”）.keyup（函数（e）{
if（$（“#searchcontent”）.val（）.length>=2）{
var pos=$（this.position（）；
$（“#搜索结果”）.html（“ffff:eeee:ggggg:”）；
}
否则{
$（“#搜索结果”）.empty（）；
}
});
});

---

解释“不工作”。您是否看到任何错误？div没有被删除…您知道每个按键都要添加一个div元素吗？不，我没有意识到+1

$(document).ready(function() {
    $("#searchcontent").keyup(function(e) {
        if ($("#searchcontent").val().length >= 2) {
            var pos = $(this).position();
            $("#searchresult").html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>");
        }
        else {
            $("#searchresult").empty();
        }
    });
});