Deleting elements based on condition with JQuery

Question

<input id="img" type="file" name="img" accept="image/*">

And this is the JQuery code:

$('#img').change(function(){

    if($('#this').val() === '') { 

        $("#subm").remove();

    }  else {

         $('<button id="subm" type="submit">Press</button>').insertAfter('#advice');

   }

});

I'm trying check if the input file is empty, if is empty, and exist a button called subm, I delete it, but if the input file has a file, I create that bottom. The problem is that, if there's a submbotton, because I select file, and after I change the input, let it empty, JQuery doesn't delete it.

How can I delete a button, created by JQuery, if an input file is empty?

Thank's advance!

You should always have a button. If the input is empty, you might disable or even hide it, but there is no reason to remove it. — Bergi
– Bergi, Commented Jan 21, 2013 at 14:05

bevacqua · Accepted Answer · 2013-01-21 14:04:38Z

3

$('#this') should be $(this), $('#this') matches an element with id=this

answered Jan 21, 2013 at 14:04

bevacqua

48.8k56 gold badges176 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbabey · Accepted Answer · 2013-01-21 14:05:01Z

3

Unless you actually have an element with an id of "this", you probably meant to use the this keyword instead:

$('#img').change(function(){
    // this will be the #img that fired the change event
    if($(this).val() === '') {
        $("#subm").remove();
    }  else {
         $('<button id="subm" type="submit">Press</button>').insertAfter('#advice');
    }
});

answered Jan 21, 2013 at 14:05

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Comments

Bergi · Accepted Answer · 2013-01-21 14:07:29Z

0

Use this:

<input id="img" type="file" name="img" accept="image/*">
<button id="subm" type="submit">Press</button>

$('#img').change(function(){
    if(!this.value) { 
        $("#subm").hide();
    } else {
        $("#subm").show();
    }
}).change(); // trigger event to init

answered Jan 21, 2013 at 14:07

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

krillgar · Accepted Answer · 2013-01-21 14:10:25Z

One thing to note is that the value of this can also change depending on the context it is being used in with javascript and jQuery. You should be fine now, however in more complex situations, you could run into issues

The best practice for this situation is to create another variable, typically called self immediately.

$('#img').change(function () {
    var self = this;
    // self will now ALWAYS be the #img that fired the change event.
    if ($(self).val() === '') {
        $("#subm").hide();
    } else {
        $("#subm").show();
    }
});

The issue happens if you use another function lower down, then this would now refer to the this in the lower function. Define a new variable for self whenever you step inside a new function so that you will always lock into what this is. (And don't forget to have those variable names be unique.)

Collectives™ on Stack Overflow

Deleting elements based on condition with JQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related