Я хочу удалить только родительский тег, на который я нажал

Question

В моем коде 3 кнопки.

Одна из них - добавить больше файлов. (.btn-plus) Один - удалить добавленный. (.btn-minus) Один из них - сброс файла. (.btn-reset)

Я мог бы добавить больше ввода с помощью кнопки (.btn-plus).

Как можно удалить только один щелчок, который я нажимаю, среди каждого ввода, который я добавляю (.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>

Answer 1

Вы должны использовать on(), чтобы прикрепить событие к динамически добавленному элементу. Затем используйте closest(), чтобы найти родительский элемент, который в данный момент выбран.

$("body").on("click", ".btn-minus", function(){
      $(this).closest('li').remove();
})

Answer 2

Здесь вы можете создавать элементы динамически, поэтому, как только страница загружена, браузер не знает о '.btn-minus'

Попробуйте:

$(document).on('click', '.btn-minus', function(){
    $(this).closest('li').remove()
})

Надеюсь, это поможет!

Answer 3

$(this).nextUntil("li") ничего не соответствует. Он ищет только братьев и сестер this, а у кнопки нет ни одного брата li. Если вы хотите выбрать li, содержащий кнопку, используйте $(this).closest("li").

. Вам также необходимо использовать делегирование событий для привязки обработчика событий к динамически создаваемым элементам.

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

Answer 4

С вашим кодом есть 2 проблемы:

1. Ваш элемент, содержащий btn-minus, создается динамически. Таким образом, событие click не будет работать, вместо этого вам нужно использовать событие on.

   $(".btn-minus").click(function(){

Поэтому вместо этого вам нужно использовать

$(document).on('click', '.btn-minus', function() {

Также вам необходимо использовать следующий код для удаления элемента.

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

Пожалуйста, ознакомьтесь с обновленным JSFiddle