There are 3 buttons in my code.
One is to add more files. ( .btn-plus
) One is to remove the one added. ( .btn-minus
) One is to reset the file. ( .btn-reset
)
I could add more input with ( .btn-plus
) button.
How could I delete only the one I click among every input I add with ( .btn-plus
)?
$(".btn-plus").click(function(){ $('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>'); return false; }) $(".btn-minus").click(function(){ $(this).nextUntil('li').remove() }) $(".btn-reset").click(function(){ $(".board-box__attachments input").value = ""; })
li { width: 60%; background: lightblue; list-style: none; padding: 0.5em; border-bottom: 1px solid white; }.th { width: 100px; float: left; }.td { width: 100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="board-box__attachments"> <li> <div class="th">files</div> <div class="td"> <input type="file"> <button class="btn btn-plus"> + </button> <button class="btn-reset">Reset</button> </div> </li> </ul>
You have to use on()
to attach event to dynamically added element. Then use closest()
to find currently clicked element's parent.
$("body").on("click", ".btn-minus", function(){
$(this).closest('li').remove();
})
There are 2 issues with you code:
btn-minus
is being created dynamically. So the click
event would not work instead you need to use on
event. $(".btn-minus").click(function(){
So instead of this you need to use
$(document).on('click', '.btn-minus', function() {
$(this).closest('li').remove();
Please see the updated JSFiddle
$(this).nextUntil("li")
doesn't match anything. It only searches siblings of this
, and the button doesn't have any li
siblings. If you want to select the li
containing the button, use $(this).closest("li")
.
You also need to use event delegation to bind an event handler to dynamically-created elements.
$(".btn-plus").click(function(){ $('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>'); return false; }) $(".board-box__attachments").on("click", ".btn-minus", function(){ $(this).closest("li").remove() })
li { width: 50%; background: lightblue; list-style: none; padding: 1em; border-bottom: 1px solid white; }.th { width: 100px; float: left; }.td { width: 100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="board-box__attachments"> <li> <div class="th">files</div> <div class="td"> <input type="file"> <button class="btn btn-plus"> + </button> </div> </li> </ul>
Here you can creating elements dynamically so once the page is loaded, browser has no knowledge of '.btn-minus'
Try this:
$(document).on('click', '.btn-minus', function(){
$(this).closest('li').remove()
})
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.