JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<span class="inputname">
    Project Images:
    <a href="#" class="add_project_file">
        <img src="https://checkin.si.amadeus.net/static/PRD/RSS/2.12.5/MOBILE-I-2X/add_small.gif" border="0" />
    </a>
</span>

<ul class="project_images">
    <li><input name="upload_project_images[]" type="file" /></li>
</ul>


<!--
http://stackoverflow.com/questions/1501181/jquery-append-and-remove-element
-->

JavaScript

// Add new input with associated 'remove' link when 'add' button is clicked.
$('.add_project_file').click(function(e) {
    e.preventDefault();

    $(".project_images").append(
        '<li>'
      + '<input name="upload_project_images[]" type="file" class="new_project_image" /> '
      + '<a href="#" class="remove_project_file" border="2"><img src="http://www.eionet.europa.eu/software/design/actionicons/delete.gif" /></a>'
      + '</li>');
});

// Remove parent of 'remove' link when link is clicked.
$('.project_images').on('click', '.remove_project_file', function(e) {
    e.preventDefault();

    $(this).parent().remove();
});