CODEWITHSUNDEEP
javascriptjqueryhtml
RollRoll
RollRoll

Reputation: 8462

How to remove element dynamically added?

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

    });

Upvotes: 0

Views: 82

Answers (4)

Ruben Infante
Ruben Infante

Reputation: 3135

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

Upvotes: 1

Flops
Flops

Reputation: 1420

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

});

Upvotes: 0

Felipe Miosso
Felipe Miosso

Reputation: 7339

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

Upvotes: 0

Doug
Doug

Reputation: 3312

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

Upvotes: 0

Related Questions