javascript - 单击子内部锚元素时如何删除父div？

Question

这是我的 aove fig 的 html 代码.....当我点击删除 (id="outdelete") 总 div (id="rightoutimage") 应该被删除............ …………

   <div id="rightoutputimgae">
           <div id="rightimgId" class="rightimg"  rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
                <div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
                </div>
           </div>
      <ul>
          <li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
          <li id="outedit"><a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit"      title="Edit"></a></li>
          <li id="outdelete"><a href="#" onClick="deleteImg(outdelete)"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
           <li id="outfullscreen"><a href="#"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></a></li>
           <li id="outshare"><a href="#"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share"></a>
        <div id="menu">
          <div id="tooltip_menu">
              <a href="#" class="menu_top" id="email"> <img src="jqe13/image/email.PNG"   alt="Email" title="Email"></a>
              <a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook"></a>
              <a href="#" id="twitter"><img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
              <a href="#" class="menu_bottom" id="save"><img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
          </div>
        </div>
           </li>
           <li id="outprint"><a href="#"><img src="jqe13/image/print.PNG" class="printMe" alt="Print"  title="Print"></a></li>
      </ul>
    </div>

这是我的脚本代码.......

<script>
   function deleteImg(id11) {
      id11 = document.getElementById("outdelete");
      $('#+id11').remove();
   }
</script>

Answer 1

$('#outdelete').click(function(){
   $("#rightoutputimgae").remove();
});

Answer 2

改变：

<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">

到：

<li id="outdelete"><a href="#" onClick="deleteImg(this)">

和你的 JS 代码：

<script>
   function deleteImg(self) {
        $(self).parents('#rightoutputimgae').get(0).remove();
   }
</script>

Answer 3

这是您的另一个选择，您可以在这里看到一个工作示例：http: //jsfiddle.net/TdLSy/

$(document).ready(function(){
    $("li a").click(function(event){
        event.preventDefault();
        $(this).find('img').remove();
    });
});

连同您的原始 HTML 代码：

  <div id="rightoutputimgae">
       <div id="rightimgId" class="rightimg"  rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
            <div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
            </div>
       </div>
  <ul>
      <li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
      <li id="outedit"><a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit"      title="Edit"></a></li>
          <li id="outdelete"><a href="#" onClick="deleteImg()"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></a></li>
       <li id="outfullscreen"><a href="#"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></a></li>
       <li id="outshare"><a href="#"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share"></a>
    <div id="menu">
      <div id="tooltip_menu">
          <a href="#" class="menu_top" id="email"> <img src="jqe13/image/email.PNG"   alt="Email" title="Email"></a>
          <a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook"></a>
          <a href="#" id="twitter"><img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
          <a href="#" class="menu_bottom" id="save"><img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
      </div>
    </div>
       </li>
       <li id="outprint"><a href="#"><img src="jqe13/image/print.PNG" class="printMe" alt="Print"  title="Print"></a></li>
  </ul>
</div>

Answer 4

试试这个：

document.getElementById("rightoutimage").addEventListener("click", function(e) {
      if(e.target.id === "outdelete") {
          var parent = e.target.parentNode;
          parent.parentNode.removeChild(parent);
      }   
});

Answer 5

你可以这样做：

$('#outdelete > a').click(function(){
   $(this).closest('#rightoutputimgae').remove();
});