按属性移除div

Question

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

<div class="addlistbox">
    <div index="1">1</div>
    <div index="2">2</div>
    <div index="3">3</div>
</div>
<div 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>
</div>

Answer 1

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

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

Answer 2

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

Answer 3

$('.btn-del').click(function(){
  var $list = $('div[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('div[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);