trying to remove div tag based on data attribute

Question

<div class="row-container" data-i="'+data[i].product_id+'">
<div class="row-container" data-i="'+data[i].product_id+'">
<div class="row-container" data-i="'+data[i].product_id+'">
<div class="row-container" data-i="'+data[i].product_id+'">

I want to delete the row-container that contains a particular product_id. I know data('i') retrieves the value, but I dont know where to go from there.

Answer 1

$('.row-container').filter(function(){
    return $(this).data('i') === "product_id"
}).remove();

.data allows you to set and get other variables beside of strings (functions and objects)

You can also use this:

$('.row-container').filter('[data-i="product_id"]').remove();

Or with one selector:

$('.row-container[data-i="product_id"]').remove();

(Where "product_id" is a placeholder for the real value...)

Answer 2

You can use filter():

var $div = $(".row-container").filter(function() {
    return $(this).data("i") == value; // where value == product id to find
});
$div.remove();

Answer 3

There's an attribute selector in jQuery that you could use to find the element that you're looking for.

$('div.row-container[data-i="<value>"]');