javascript - 按属性移除div

Question

我想在btnlistview里按下某个删除按钮对应的addlistbox里的index值所属的p也被删除,
要怎么通过属性值去删除对应的p??

<p class="addlistbox">
    <p index="1">1</p>
    <p index="2">2</p>
    <p index="3">3</p>
</p>
<p class="btnlistview">
    <button type="button" class="btn-del" data-index="1">删除</button>
    <button type="button" class="btn-del" data-index="2">删除</button>
    <button type="button" class="btn-del" data-index="3">删除</button>
</p>

Answer 1

$('.btn-del').click(function() {
    var idx = $(this).attr('data-index');
    $('.addlistbox p[index=' + idx +']').remove（）;
});

jQuery好久没用了，可能有小纰漏。

Answer 2

//其实可以更简洁:)
$("button").on("click", function (e) {
    var index = $(e.currentTarget).index();
    $("p[index]").eq(index).remove();
});

Answer 3

$('.btn-del').click(function(){
  var $list = $('p[index]');
  var len = $list.length;
  for(var i=0; i<len; i++){
    if($(this).data('index') == $list.eq(i).attr('index')){
      $('.addlistbox').find($list.eq(i)).remove();
    }
  }
});

Answer 4

var callback = function(){
    var element = document.querySelector('p[index="'+ this.dataset.index +'"]');
    element.parentNode.removeChild(element);    
};
var btns = document.querySelectorAll('.btn-del');
for(var i=0; i<btns.length; i++)
    btns[i].addEventListener('click',  callback);