CODEWITHSUNDEEP
jquery
usman
usman

Reputation: 63

Jquery add remove function

Hi i am new in jquery and i am adding a form on click function to my form everything is working fine. But i don't want to show remove button with form first i only want to display my added form remove button after i click

Here is my code 

$('#addFiles').click(function() {
    img_input = '<input name="image[#count#]"  type="file">';
    img_input = img_input.replace(new RegExp('#count#', 'g'),count);

    htmlstr =
    '<div class="fileupload fileupload-new" data-provides="fileupload">\
    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">\
      <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />\
    </div>\
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>\
    <div>\
      <span class="btn btn-white btn-file">\
        <span class="btn btn-file fileinput-button">\
          <span>Upload Image </span>\
          '+img_input+'\
        </span>\
      </span>\
      \<a id="removeField" class="btn btn-danger" type="button" onclick="remove_row(this)"><i class="fa fa-trash-o"></i></a>\
    </div>\
  </div>\
</div>';
$('#form-image').append(htmlstr);
count++;
i++;
return false;
});

  $('#addFiles').click();

});

function remove_row(obj){
  $(obj).parent().parent().remove();
}

Upvotes: 0

Views: 66

Answers (1)

Bhaumik Pandhi
Bhaumik Pandhi

Reputation: 2683

you can hide remove button for the first item, do something like this.

// html change
<a id="removeField" class="btn btn-danger remove-btn" type="button" onclick="remove_row(this)"><i class="fa fa-trash-o"></i></a>

// jquery change, call this statemet after every append.
$('#form-image').find('.fileupload').first().find('.remove-btn').hide()

Upvotes: 1

Related Questions