Remove Correspondingly File Input that Created by JQuery

Question

I have Add Attachment link which if clicked will create a file input and delete link. For example I have add 3 file inputs and if user click delete link for file input 2, it will delete file input 2 not the last file input, so it will delete only correspondingly file input.

How to code jquery for this case? also how to arrange the file input so it will add vertically? I'm using Jasny Bootstrap for <input type="file"/>

View:

<div class="form-group">
    <label class="control-label col-md-2">Attachment</label>
    <div class="col-md-10">
        <div id="attachments">
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-10"><a href="#" id="addAttachment">Add More</a></div>
</div>

Script:

$(document).ready(function () {
            $("#addAttachment").click(function () {
                $("#attachments").append("<div class='fileinput fileinput-new' data-provides='fileinput'><span class='btn btn-default btn-file'><span class='fileinput-new'>Select file</span><span class='fileinput-exists'>Change</span><input type='file' name='myFile'></span><span class='fileinput-filename'></span><a href='#' class='close fileinput-exists' data-dismiss='fileinput' style='float: none'>&times;</a></div>")
            });
        });

Answer 1

You should always share a demo of your code with http://jsbin.com when posting a StackOverflow question.

I don't know how you create elements and how you initialize them. But here's a couple of examples.

Method 1: using a closure to remember which element each button belongs

You create a new element during the click event on the addmore button. At this moment, you've got a single element being created and you can bind it's remove button to the element itself:

$('.addmore').click( function(event) {
  event.preventDefault();

  var randomString = (Math.random() + 1).toString(36).substring(7);

  var $newElement = $("<div class='element'>" +
    "  <span class='element-content'>" +
    "     Element content " + randomString +
    "  </span>" +
    "  <a href='#!' class='element-delete'>Delete</a>" +
    "</div>");

  $newElement.appendTo($('body'));

  var $removeButton = $newElement.find('.element-delete');

  $removeButton.click( function(event) {
    event.preventDefault();
    $newElement.remove();
  });

});

Demo: http://jsbin.com/damag/3/edit?html,js,output

Method 2: traversing the DOM to find which element the clicked button belongs to

You create elements in one place of your code and react to their deletion in another place in the code.

When an remove button is clicked, you don't know, which element it corresponds to. Well, we have to figure it out!

$('.element-delete').click( function(event) {
  event.preventDefault();

  var $clickedButton = $(event.target);
  var $element = $clickedButton.closest('.element');
  $element.remove();
});

Demo: http://jsbin.com/damag/4/edit?html,js,output

This example looks simpler, but that's because it does not include the code that applies the example to dynamically created elements. You'll have to figure it out yourself (or update your question with more details and a http://jsbin.com demo and leave a comment to my answer so that i notice your update).

Answer 2

Here is the basic idea:

http://jsfiddle.net/xf7vJ/4/ or http://jsfiddle.net/xf7vJ/5/

html

<button>duplicate</button>

<div class='clone'>
    <textarea></textarea>
    <a href="#" class='delete'>x</a>
</div>

jquery

// save into memory (just the first div.clone)
var theTextarea = $(".clone:eq(0)");

// clone the element (the true attr is important)
$("body").on('click', "button", function(){
 theTextarea.clone(true).appendTo("body");
});

// remove it
$(".delete").on('click',function(e){
    e.preventDefault();
 $(this).parent().remove();
});