Remove div based on child element using JQuery

Question

I have a list of divs similar to the following:

<div class="row"><a data-card-uid="not me"></a></div>
<div class="row"><a data-card-uid="not me"></a></div>
<div class="row"><a data-card-uid="THIS ONE"></a></div>
<div class="row"><a data-card-uid="not me"></a></div>
<div class="row"><a data-card-uid="not me"></a></div>
<div class="row"><a data-card-uid="not me"></a></div>

I'd like to remove the div which has

data-card-uid="THIS ONE"

How can I do this? I understand you can use .remove() to remove the corresponding div but I'm not sure how to select the appropriate one.

Answer 1

首先使用Attribute Equals Selector选择要删除其父元素的元素，然后在parent()上调用remove() parent() 。

$('[data-card-uid="THIS ONE"]').parent().remove();

Answer 2

如果要删除内容为data-card-uid =“ THIS ONE”的div，请使用：

$('[data-card-uid="THIS ONE"]').parent().remove();

Answer 3

You need to remove the parent. So

$('[data-card-uid="THIS ONE"]').parent().remove();

See it here JSFiddle

Answer 4

 $(document).ready(function() { $('[data-card-uid="THIS ONE"]').parent(".row").remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="row"> <a data-card-uid="not me">not me</a> </div> <div class="row"> <a data-card-uid="not me">not me</a> </div> <div class="row"> <a data-card-uid="THIS ONE">this one</a> </div> <div class="row"> <a data-card-uid="not me">not me</a> </div> <div class="row"> <a data-card-uid="not me"></a> </div> <div class="row"> <a data-card-uid="not me">not me</a> </div>