Удалить текущий элемент

Question

<p>1</p><span class="delete">-</span>
<p>2</p><span class="delete">-</span>
<p>3</p><span class="delete">-</span>

Как на jquery при клике - удалить полностью текущий элемент

Answer 1

var deletes = $('.delete');
var p = $('p');
deletes.each(function (c,d) {
    d.addEventListener('click', function () {
        this.remove();
        p[c].remove();
    })
})

<p>1</p><span class="delete">-</span>
<p>2</p><span class="delete">-</span>
<p>3</p><span class="delete">-</span>

Answer 2

$(document).on('click', '.delete', function() {
    //$(this).prev().remove();  // если надо удалять еще и тег "p"
    $(this).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<p>1</p><span class="delete">-</span>
<p>2</p><span class="delete">-</span>
<p>3</p><span class="delete">-</span>

Если надо удалять еще и тег "p" - то рекомендую эти блоки оборачивать еще в один div, чтобы было удобнее удалять родителя элемента, по которому был произведён клик

$(document).on('click', '.delete', function() {    
    $(this).closest('div.card').remove();   //  $(this).parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="card">
  <p>1</p><span class="delete">-</span>
</div>
<div class="card">
  <p>2</p><span class="delete">-</span>
</div>
<div class="card">
  <p>3</p><span class="delete">-</span>
</div>

БЛОГ НА HUSL

Удалить текущий элемент

Ответы (2 шт):