使用jquery从代码中删除一个元素

Delete an element from the code using jquery

本文关键字：一个 元素 删除 jquery 代码 使用      更新时间：2023-09-26

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

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

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

<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 = "answerswerlink" href = "#">Answer</a>
</div>
<div class = "answerswer">  
    <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 = "answerswerinfo">
        - <a href = "#">Macaque</a> on <span>13.13.13</span>
    </div>
</div>

如果你不理解我这里的结果

关于函数性：

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

您应该使用最接近的而不是父对象，因为一旦找到第一个数学并且父对象移动到dom的根，它就会停止。此外，如果你不再需要这个块，你可以在tue动画以回调函数结束后，用jquery方法remove((将其移除。

此外，您还缺少一些分号和标记

$(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 = "answerswerlink" href = "#">Answer</a>
</div>
<div class = "answerswer">  
    <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 = "answerswerinfo">
        - <a href = "#">Macaque</a> on <span>13.13.13</span>
    </div>
</div>

我希望我有用。

尝试隐藏删除按钮的容器的容器，无论其类别如何，它都能工作：

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