Question

我正在尝试Jquery，现在我遇到了问题。我想从我的网页中删除一个元素。所以，当我按下删除按钮时 - 大元素必须消失。使用JQ我写了这样的东西

$(document).ready(function(){
      $(".delete").click(function(){
          $(this).parents(".block").animate({ opacity: 'hide' }, "slow");
      })
    });

在我没有添加细分或回答之前，它一直运行良好。应用程序现在必须如何工作？我按下删除按钮，它必须删除当前块。

<div class = "block">
<div class = "postbuttons">
    <img src = "img/delete-icon.png" class = "delete"></a>
    <img src = "img/edit-icon.png" class = "edit"></a>
</div>

<div class = "postinfo">
    <span class = "author"><a href = "#">Da Monkey</a> wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>

<div class = "post">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
    <a class = "answerlink" href = "#">Answer</a>
</div>

<div class = "answer">  
    <div class = "postbuttons">
        <img src = "img/delete-icon.png" class = "delete"></a>
        <img src = "img/edit-icon.png" class = "edit"></a>
    </div>              
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero.  </p>
    <div class = "answerinfo">
        - <a href = "#">Macaque</a> on <span>13.13.13</span>
    </div>
</div>

如果你不理解我result

Answer 1

尝试隐藏删除按钮容器的容器，无论其类如何都可以使用

$(document).ready(function(){
      $(".delete").click(function(){
          $(this).parents(".postbuttons").parent().animate({ opacity: 'hide' }, "slow");
      })
    });

Answer 2

尊重功能：

$(document).ready(function(){
          $(".delete").click(function(){
              $(this).closest(".block").animate({ opacity: 'hide' }, "slow");
          });
        });

你应该使用最近而不是父母，因为一旦找到第一个数学并且父母前往dom的根，它就会停止。此外，如果你不再需要块，你可以使用jquery方法remove（），在tue动画以回调函数结束后删除它。

你也缺少一些分号和标签

$(document).ready(function(){
      $(".delete").click(function(){
          $(this).parents(".block").animate({ opacity: 'hide' }, "slow");
      })   // here needs a semicolon
    });

缺少标签

<div class = "block">
<div class = "postbuttons">
    <img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
    <img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>

<div class = "postinfo">
    <span class = "author"><a href = "#">Da Monkey</a> wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>

<div class = "post">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
    <a class = "answerlink" href = "#">Answer</a>
</div>

<div class = "answer">  
    <div class = "postbuttons">
        <img src = "img/delete-icon.png" class = "delete"></a>  <--! missing <a> -->
        <img src = "img/edit-icon.png" class = "edit"></a>   <--! missing <a> -->
    </div>              
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero.  </p>
    <div class = "answerinfo">
        - <a href = "#">Macaque</a> on <span>13.13.13</span>
    </div>
</div>

我希望我很有用。

使用jquery从代码中删除元素

2 个答案: