Javascript 在jQuery中选择具有不同ID名称或类名的元素中的元素

我有一个无序的列表，里面有表格。该列表还使用一个图像，单击该图像时应隐藏该表。我有以下jQuery代码，但它不起作用：

$(".glyphicon-remove").click(function () {
        var tblId = $(this).attr("id");
       // alert(tblId);
       var ans = confirm("Are you sure you want to remove this table?");
       if(ans == true)
        $("#" + tblId).hide();
    });

使用的列表如下：

<ul class="sortable">
            <li class="ui-state-default"  id="first"><span style="float:right;"class="glyphicon glyphicon-remove"></span><br/>




            <table class="rounded-corner">
    <thead>
        <tr>
            <th></th>
            <th>Product</th>
            <th>Details</th>
            <th>Price</th>
            <th>Date</th>
            <th>Category</th>
            <th>User</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
        <tfoot>
        <tr>
            <td colspan="12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Box Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Trial Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>155$</td>
            <td>12/04/2011</td>
            <td>web design</td>
            <td>Carrina</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td>
        </tr>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Hosting Pack</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Duo Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>745$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Alex</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="odd">
            <td><input type="checkbox" name="" /></td>
            <td>Alavasti Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>John</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>
        <tr class="even">
            <td><input type="checkbox" name="" /></td>
            <td>Box Software</td>
            <td>Lorem ipsum dolor sit amet consectetur</td>
            <td>45$</td>
            <td>10/04/2011</td>
            <td>web design</td>
            <td>Doe</td>
            <td><a href="#"><img src="images/edit.png" alt="" title="" border="0" /></a></td>
            <td><a href="#"><img src="images/trash.gif" alt="" title="" border="0" /></a></td
        </tr>


    </tbody>
</table>
            </li>
            <li class="ui-state-default" id="second">2</li>
            <li class="ui-state-default" id="third">3</li>
            <li class="ui-state-default" id="fourth">4</li>
            <li class="ui-state-default" id="fifth">5</li>
            <li class="ui-state-default" id="sixth">6</li>
            <li class="ui-state-default" id="seventh">7</li>
            <li class="ui-state-default" id="eighth">8</li>
            <li class="ui-state-default" id="ninth">9</li>
            <li class="ui-state-default" id="tenth">10</li>

        </ul>

产品
细节
价格
日期
类别
使用者
编辑
删除
我的同僚们都坐在我的位子上，为我的精英们献身，为我提供临时服务。
Box软件
同侧阴唇
45$
10/04/2011
网页设计
亚历克斯
试用软件
同侧阴唇
155$
12/04/2011
网页设计
卡利娜
主机包
同侧阴唇
45$
10/04/2011
网页设计
亚历克斯
您可以使用：

var tblId = $(this).parent().attr("id");

而不是：

var tblId = $(this).attr("id");

由于您希望通过类
glyphicon remove获得
li
元素的
id
，请尝试以下操作：

$(".glyphicon-remove").click(function () {
    var tblId = $(this).attr("id");
   // alert(tblId);
   var ans = confirm("Are you sure you want to remove this table?");
   if(ans == true)
    $(this).siblings('table').hide();
});

我认为您应该从这里删除
，
$（“#“+tblId）.hide（）跨度不包含任何Id属性。所以这行代码是：var-tblId=$（this.attr（“id”）；tblId总是未定义的。请将其粘贴到
if
语句中：
$（this）.parent（）.find（'table'）.hide（）
$（这个）。最近（'li'）。hide（）
也是可行的，我想…@Bharadwaj它也会隐藏
，但OP希望只隐藏特定
<代码>$（这个）。最近（'li'）。hide（）
可以使用吗？如何取回隐藏的表？@Utkarshingh你可以使用
.toggle（）
而不是
.hide（）
-因此再次单击
元素将显示您的表。