I want to remove only the parent tag I clicked

Question

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>

Possible duplicate of [How do I attach events to dynamic HTML elements with jQuery?](https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery) — cloned, Oct 07 '19 at 06:57
Nothing happens when I click on the minus button. You need to use event delegation, see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Oct 07 '19 at 06:57

score 1 · Answer 1 · answered Oct 07 '19 at 06:59

1

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();
})

answered Oct 07 '19 at 06:59

Ankur Mishra

1,284
1
6
15

score 0 · Answer 2 · answered Oct 07 '19 at 07:00

There are 2 issues with you code:

Your element which contains 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() {

Also you need to use following code to remove element.

$(this).closest('li').remove();

Please see the updated JSFiddle

score 0 · Accepted Answer · answered Oct 07 '19 at 07:01

$(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>

score 0 · Answer 4 · answered Oct 07 '19 at 07:01

0

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!

answered Oct 07 '19 at 07:01

Harshit verma

506
3
25

I want to remove only the parent tag I clicked

4 Answers4