Question

HTML：

<div class="myactivelabelsWrap">
   <div data-role="collapsible" data-inset="false" class="ui-collapsible ui-collapsible-themed-content">
      <h3 class="ui-collapsible-heading"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-inherit ui-icon-minus">Home <a class="icon-pencil-1 labelEditIcon ui-link"></a><span class="ui-collapsible-heading-status"> click to collapse contents</span></a></h3>
      <div class="ui-collapsible-content ui-body-inherit" aria-hidden="false">
         <ul data-role="listview" class="labellistUL ui-listview">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li class="labellist ui-li-static ui-body-inherit ui-first-child">
               <div class="leftlable">
                  <h4>Rayalaseema Ruchulu</h4>
                  <p>Area Name,  <b>Phone:</b> +91 99890 11223</p>
                  <p><b>Timings:</b> 11am - 2pm</p>
                  <p class="minOrder">Min. Order Rs. 250/-  Delivery Charges Free</p>
                  <label class="label-red label-wrap">Close</label>
               </div>
               <div class="rightlable">
                  <a href="#" class="ui-link removerestaurant" id="1">Remove</a>
               </div>
            </li>
            <li class="labellist ui-li-static ui-body-inherit">
               <div class="leftlable">
                  <h4>Rayalaseema Ruchulu</h4>
                  <p>Area Name,  <b>Phone:</b> +91 99890 11223</p>
                  <p><b>Timings:</b> 11am - 2pm</p>
                  <p class="minOrder">Min. Order Rs. 250/-  Delivery Charges Free</p>
               </div>
               <div class="rightlable">
                  <a href="#" class="ui-link removerestaurant" id="2" >Remove</a>
               </div>
            </li>
            <li class="labellist ui-li-static ui-body-inherit ui-last-child">
               <div class="leftlable">
                  <h4>Rayalaseema Ruchulu</h4>
                  <p>Area Name,  <b>Phone:</b> +91 99890 11223</p>
                  <p><b>Timings:</b> 11am - 2pm</p>
                  <p class="minOrder">Min. Order Rs. 250/-  Delivery Charges Free</p>
               </div>
               <div class="rightlable">
                  <a href="#" class="ui-link removerestaurant" id="3">Remove</a>
               </div>
            </li>
            <div class="label-BtnWrap"><button class="icon-plus btn btn-c ui-btn ui-shadow ui-corner-all">Add More</button></div>
            &nbsp;&nbsp;&nbsp;&nbsp;
         </ul>
      </div>
   </div>
</div>

JS：

$(document).on('click', '.removerestaurant', function(event) {
    var id = $(this).attr('id');
    deletefromDatabase(id);
});

function deletefromDatabase(id)
{
    $(this).closest('.labellist').remove();
}

如何删除点击的元素.labellist父级？

Answer 1

致电this时，deletefromDatabase不正确。改为传递元素（现在）。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/svkyp55h/2/

$(document).on('click', '.removerestaurant', function(event ) {

 var id = $(this).attr('id');

    deletefromDatabase(this);
});


function deletefromDatabase(element)
{
    $(element).closest('.labellist').remove();
}

另一种方法是将第一行删除代码放在第一个处理程序中：

$(document).on('click', '.removerestaurant', function(event ) {
    var id = $(this).attr('id');
    $(this).closest('.labellist').remove();
});

Answer 2

要从DOM中删除，您只需遍历最近的li元素，然后在click事件本身中删除它。你不需要为它编写单独的函数：

$(this).closest('li').remove();

完整代码：

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

如何删除单击的元素父级？

2 个答案: