CODEWITHSUNDEEP
javascriptjqueryhtml
Ludwig
Ludwig

Reputation: 1791

How do I remove an input field after it's being emptied

I am adding input fields on keystroke, by using an example from the answer for this question. This is my example. I was trying in various ways to remove field if user deletes content from it, so that there are always fields that have some content and one last empty field for adding more, but I just can't find a solution.

This is the code:

$(document.body).on("input", ".external-media-input:last", function () {
    var inputID = (parseInt($(this).attr('id')) + 1);
    $(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
});

Upvotes: 1

Views: 79

Answers (3)

Poonam
Poonam

Reputation: 549

You can use also on('keyup')

$(document.body).on("keyup", ".external-media-input", function(){
    if($(this).val() == '') 
       $(this).remove(); 
});

here is your fiddle: https://jsfiddle.net/bembvptx/2/

Upvotes: 2

deadulya
deadulya

Reputation: 706

In your style add one more event:

$(document.body).on("input", ".external-media-input", function () {
  if (!$(this).val())
  {
   $(this).remove();
  }
});

Upvotes: 1

Artur Filipiak
Artur Filipiak

Reputation: 9157

You can use on('blur') or .on('focusout')

//...
.on('blur', ".external-media-input:not(:last)", function () {
    if(!$(this).val()) $(this).remove();
});

JSFiddle

Upvotes: 2

Related Questions