Question

我有下面的代碼，當「瀏覽」單擊時，我想將相同的內容放在div「projectidAppe」中，並將「瀏覽」更改爲「刪除」按鈕。我已經做到了這一點使用下面的jQuery的，

$(document).on("change", "#idProjectTitle", function(e) { 
 
    var datatoappend = ' <div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>'; 
 
    $("#txtProjectTitle").attr('placeholder', $(this).val().split('\\').pop()); 
 
    var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>'; 
 
    $('#clearbtn').html(''); 
 
    $('#clearbtn').append(btnDelete); 
 
    $("#projectidAppe").append(datatoappend); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="exampleInputEmail1">Project Photos</label> 
 
<div class="form-group file-uploader"> 
 
    <div class="input-group col-xs-12"> 
 
    <span class="input-group-addon"> 
 
     <i class="glyphicon glyphicon-picture"></i> 
 
    </span> 
 
    <input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"> 
 
    <div id="clearbtn" class="input-group-btn"> 
 
     <div class="browse btn btn-primary"> 
 
     <i class="glyphicon glyphicon-search"></i> Browse 
 
     <input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

但現在，沒有發生分別txtProjectTitle的placeholder內的每個圖像的名稱。文件上傳後，如何顯示每一個刪除按鈕以及如何刪除一行時點擊刪除按鈕？

Answer 1

你的HTML：

<div id="projectidAppe"> 
<label for="exampleInputEmail1">Project Photos</label> 
<div class="form-group file-uploader"> 
    <div class="input-group col-xs-12"> 
    <span class="input-group-addon"> 
     <i class="glyphicon glyphicon-picture"></i> 
    </span> 
    <input type="text" id="txtProjectTitle-0" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"> 
    <div id="clearbtn-0" class="input-group-btn"> 
     <div class="browse btn btn-primary"> 
     <i class="glyphicon glyphicon-search"></i> Browse 
     <input type="file" accept="image/*" class="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 

您的JS：

var count = 1; 
$(document).on("change", ".idProjectTitle", function(e) { 
    var datatoappend = ' <div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle-'+count+'" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div id="clearbtn-'+count+'" class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" class="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>'; 
    $("#txtProjectTitle-"+(count-1)).attr('placeholder', $(this).val().split('\\').pop()); 
    var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>'; 
    $('#clearbtn-'+(count-1)+' .browse').css('display','none'); 
    $('#clearbtn-'+(count-1)).append(btnDelete); 
    $("#projectidAppe").append(datatoappend); 
    count ++; 
}); 
$(document).on("click", "#idImgDelete",function(){ 
    $(this).parentsUntil(".form-group.file-uploader").remove(); 
});