Question

点击按钮我需要删除特定的ul标签

这是我的小提琴

这是我的代码

<div role="main" class="ui-content oms-content">
    <div class="myactivelabelsWrap" id="result">
        <div data-role="collapsible" data-inset="false">
             <h3>Heading 1<a class="icon-pencil-1 labelEditIcon" data_attr="123" >Edit</a></h3>

            <ul data-role="listview" labellistulid="48" class="labellistUL ui-listview">
                <li class="labellist   ui-li-static ui-body-inherit ui-first-child ui-last-child">
                    <div class="leftlable">
                        <p class="minOrder">Min. Order Rs. 25/- Delivery Charges 21.11</p>
                    </div>
                    <div class="rightlable"> <a href="#" class="ui-link removerestaurant" data_vendor_id="5000821693" data_loc_name="Location1" data_ven_availability_id="46">Remove</a>

                    </div>
                </li>
            </ul>
            <ul data-role="listview" labellistulid="47" class="labellistUL ui-listview">
                <li class="labellist   ui-li-static ui-body-inherit ui-first-child ui-last-child">
                    <div class="leftlable">
                        <p class="minOrder">Min. Order Rs. 25/- Delivery Charges 21.11</p>
                    </div>
                    <div class="rightlable"> <a href="#" class="ui-link removerestaurant" data_vendor_id="5000821693" data_loc_name="Location1" data_ven_availability_id="46">Remove</a>

                    </div>
                </li>
            </ul>
        </div>
    </div>

$(document).on('click', '.removerestaurant', function (event) {
    var labellist_id = $(this).closest('.labellistUL').attr('labellistULid');

    deltethislabel(labellist_id);

});

function deltethislabel(labellist_id) {
    // do an ajax call if its success then remove it 
    $("#result").find("#" + labellist_id + " .labellistUL").remove();
}

你能告诉我怎么做吗??

Answer 1

如上所述使用属性equals选择器，或将ul引用传递给delete方法，如

$(document).on('click', '.removerestaurant', function (event) {
    var $ul = $(this).closest('.labellistUL');

    deltethislabel($ul);

});

function deltethislabel($ul) {
    var labellist_id = $ul.attr('labellistULid');

    // do an ajax call if its success then remove it 
    $ul.remove();
}

Answer 2

<强> JSFiddle Link

只需使用jQuery parent()＆amp; remove()喜欢这样：

$('.removerestaurant').on('click', function(){
    $(this).parent().parent().parent().remove();
});

Answer 3

您可以使用closest()上的a查找最近的.labellistUL元素，然后将其删除：

$(document).on('click', '.removerestaurant', function (event) {
    $(this).closest('.labellistUL').remove();
});

Working fiddle

另请注意，创建非标准属性（即labellistulid）表示您的网页无效。这可能会导致UI和JavaScript代码出现问题。如果您需要使用元素存储其他数据，请使用data-*属性。

Answer 4

用这个替换你的js怎么样：

$( "a.removerestaurant" ).click(function() { alert('labellistulid: '+$(this).closest('ul').attr('labellistulid')); $(this).closest('ul').remove(); });

fiddle

Answer 5

下面我获取所有UL标签并通过所需的属性搜索，找到后，使用parentElement删除它。

我没有使用JQuery，所以你可以使用你想要的任何套件来改变它以满足你的需求。

<html>
<script>
function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++)
  {
    if (allElements[i].getAttribute(attribute) !== null)
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

  function Remove(labellistulid){
    //Credits for this function in http://stackoverflow.com/questions/9496427/can-i-get-elements-by-attribute-selector-when-queryselectorall-is-not-available
    elements = getAllElementsWithAttribute('labellistulid');

    for (var i = 0; i < elements.length; i++){
      if (elements[i].getAttribute("labellistulid") == labellistulid) {     
        elements[i].parentElement.removeChild(elements[i]);
      }
    }    
  }
</script>
<body>
<div role="main" class="ui-content oms-content">
    <div class="myactivelabelsWrap" id="result">
        <div data-role="collapsible" data-inset="false">
             <h3>Heading 1<a class="icon-pencil-1 labelEditIcon" data_attr="123" >Edit</a></h3>

            <ul data-role="listview" labellistulid="48" class="labellistUL ui-listview">
                <li class="labellist   ui-li-static ui-body-inherit ui-first-child ui-last-child">
                    <div class="leftlable">
                        <p class="minOrder">Min. Order Rs. 24/- Delivery Charges 21.11</p>
                    </div>
                    <div onclick="Remove(48)" class="rightlable"> <a href="#" class="ui-link removerestaurant" data_vendor_id="5000821693" data_loc_name="Location1" data_ven_availability_id="46">Remove</a>

                    </div>
                </li>
            </ul>
            <ul data-role="listview" labellistulid="47" class="labellistUL ui-listview">
                <li class="labellist   ui-li-static ui-body-inherit ui-first-child ui-last-child">
                    <div class="leftlable">
                        <p class="minOrder">Min. Order Rs. 25/- Delivery Charges 21.11</p>
                    </div>
                    <div onclick="Remove(47)" class="rightlable"> <a href="#" class="ui-link removerestaurant" data_vendor_id="5000821693" data_loc_name="Location1" data_ven_availability_id="46">Remove</a>

                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

如何根据div中的id删除特定的ul标签？

5 个答案: