Удалить узел DOM из списка, нажав (x) кнопку

Question

Я динамически добавляю это значение на мою страницу. и код:

Я хочу удалить, когда сечение будет нажата. Но я не могу удалить его. -_-

Итак, что я написал:

function myFunction(e) {
 $(this).parent().remove();
 alert("Deleted");
}

Это просто показывает удаленное предупреждение, но почему бы ничего не удалить.

Как это сделать. Пожалуйста, помогите

Answer 1

Вам нужно передать правильный this в вашу myFunction функцию.

В настоящее время вы передаете:

onclick="myFunction(this.id)"

Но вы должны передать ссылка на элемент нажал, так что вы можете сделать:

onclick="myFunction(this)"

, а затем:

function myFunction( elm ) {
  $(elm).closest('.job-list').remove()  // safer to use "closest" than "parent"
}

Минимальная демонстрация:

function myFunction(elm){
  $(elm).closest('.job-list').remove()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='job-list'>
    <p>item 1</p>
    <div>
      <button onclick="myFunction(this)">&times;</button>
    </div>
  </li>
  <li class='job-list'>
    <p>item 2</p>
    <div>
      <button onclick="myFunction(this)">&times;</button>
    </div>
  </li>
  <li class='job-list'>
    <p>item 3</p>
    <div>
      <button onclick="myFunction(this)">&times;</button>
    </div>
  </li>
</ul>

---

Для отладки такого сценария ios вы должны использовать console.log вместо alert, и тогда у вас могут быть содержательные журналы, такие как console.log(this) чтобы узнать, является ли this нод DOME , который вы хотите, или это что-то еще.

Answer 2

Я думаю, что вы хотите удалить весь job-list класс div по ссылке bookmark-remove. Для этого вместо этого вы можете использовать метод .closest().

Во-первых, обновите строку HTML следующим образом:

'<a href="#" class="bookmark-remove" onclick="myFunction(this)"><i class="fas fa-times"></i></a>'+

Итак, здесь вместо передачи this.id, мы хотим передать текущий элемент dom в обработчик событий clcik, например myFunction(this), а затем обновить функцию следующим образом:

function myFunction(obj) {
  $(obj).closest('.job-list').remove();
  alert("Deleted");
}

---

Кроме того, обычно это не очень хорошо Идея использовать встроенные обработчики событий. Таким образом, вы можете использовать Делегирование событий здесь вместо этого, например:

1. Сначала удалите атрибут onclick из строки HTML и просто сохраните его:

   '<a href="#" class="bookmark-remove"><i class="fas fa-times"></i></a>'+
   ...
   

2. Затем присоедините делегированный обработчик событий, например:

   $('.bookmark-area').on("click", ".bookmark-remove", function(event) {
      event.preventDefault();
      $(this).closest('.job-list').remove()
   });
   

Answer 3

Я бы go с:

function myFunction(e) {
 $(this).closest('.job-list').remove();
 alert("Deleted");
}

Вы должны проверить позицию вашего события щелчка (по какому элементу DOM нажимается), а затем go вверх, пока не дойдете до основного контейнера (например, job-list). Надеюсь, это поможет, и я правильно прочитал HTML.