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

Question

I have this code, which adds dynamic div right below the textbox but I want to remove it after the user deletes the characters:

The code below doesn't work, I don't see what I am doing wrong

Code from Fiddle

See code below:

    $(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();
            }
        });

    });

Answer 1

I would suggest simply having a container ready to receive the result content in your HTML. Then you can reduce the problem by either adding the results there or emptying that container. In your original code, you were continually adding div elements on every keypress event.

Also, as others have mentioned, you will want to use .keyup() instead of .keypress() to ensure the value of the input is correct when the event triggers.

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();
        }
    });
});

jsfiddle

Answer 2

The issue is that keypress is run before the actual value is updated. So, if the textbox says "hi" and you press backspace, the value of the select is still "hi".

Alter

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

to

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

and it solves the issue.

Updated JS Fiddle

Answer 3

The problem is that .keypress() does not fire when backspace is pressed. Use .keyup() instead.

Answer 4

It`s not a good way always run selector for html. Especially global. Save the link to node and remove it by it

$(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);
        }
    });

});