How can i delete the the particular ul tag based on id in a div?

Question

On click of a button i need to remove a particular ul tag

This is my fiddle

This is my code

<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();
}

Could you please let me know how to do this ??

I think what you are looking for is `$(this).closest('.labellistUL').remove()` in the click handler... no need to get `labellist_id` — Arun P Johny, Feb 12 '15 at 10:25
@ArunPJohny , i have to delete based on the Ajax result , so can't use this . — , Feb 12 '15 at 10:28
@Kiran I don't see any Ajax requests in your code. And you have already found element: `$(this).closest('.labellistUL')`. What is the point to search it once more? — Regent, Feb 12 '15 at 10:29
@Regent , Ajax code s present in my actual application , so for fiddle i have put a comment based on that . — , Feb 12 '15 at 10:31
@Kiran and how can we suggest something not seeing important part of code? Right now, based on your code, Arun P Johny's solution sounds like the best one. — Regent, Feb 12 '15 at 10:37

score 1 · Accepted Answer · answered Feb 12 '15 at 10:35

1

Use an attribute equals selector as suggested above, or pass the ul reference to the delete method like

$(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();
}

answered Feb 12 '15 at 10:35

Arun P Johny

384,651
66
527
531

@Regent yes, it should be – Arun P Johny Feb 12 '15 at 10:40

score 0 · Answer 2 · answered Feb 12 '15 at 10:25

0

JSFiddle Link.

Just use jQuery parent() & remove() like this:

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

answered Feb 12 '15 at 10:25

atiquratik

1,296
3
27
34

1

`.parent().parent().parent()` is inflexible. – Regent Feb 12 '15 at 10:27

score 0 · Answer 3 · answered Feb 12 '15 at 10:26

0

You can use closest() on the a to find the nearest .labellistUL element, and remove it:

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

Working fiddle

Also note that creating non-standard attributes (ie. labellistulid) means your page is invalid. This can cause issues with your UI and JavaScript code. If you need to store additional data with an element, use a data-* attribute.

answered Feb 12 '15 at 10:26

Rory McCrossan

331,213
40
305
339

Thanks , but i have to delete based on the id . – Feb 12 '15 at 10:27
1

But you have no elements of matching ids in the HTML, hence why it doesn't work. This achieves the same behaviour without that need. – Rory McCrossan Feb 12 '15 at 10:27
@Kiran if you want to select elements based on IDs, first of all **add** IDs to your elements. – Regent Feb 12 '15 at 10:31
Even though i added id's i couldn't able to do delete on that . – Feb 12 '15 at 10:32

dweller · Answer 4 · 2015-02-12T12:40:27.053

0

What about replacing your js with this:

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

fiddle

edited Feb 12 '15 at 12:40

answered Feb 12 '15 at 10:32

dweller

36
4

score 0 · Answer 5 · answered Feb 12 '15 at 10:54

Below I get all UL tags and search into by the desired atribute, when found, remove itseld using parentElement.

I didn't use JQuery, so you can change it to fit your needs using any suite you want.

<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>

How can i delete the the particular ul tag based on id in a div?

5 Answers5