Vue.js - 在悬停时添加删除按钮并在按下按钮时删除它

Question

我有以下数据来自另一台不受我控制的服务器，当在浏览器中显示它时，我必须提供解决方案

1) 悬停时显示类childElement 的删除按钮

2) 点击删除按钮，删除childElement div

有什么方法可以使用 CSS/JS 或 Vuejs（在悬停时动态添加删除按钮并在按钮单击时删除元素）？谢谢你

.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}

<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

Answer 1

您的工作基本上可以归结为一些脚本，该脚本将查找所有元素并使用侦听器自动附加元素。

const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
  // create button for each childElement
  const deleteButton = document.createElement('button');
  deleteButton.setAttribute('hidden', '');
  deleteButton.innerText = "Click to delete";
  // append button to the childElement
  childElement.appendChild(deleteButton);

  // add event listeners
  childElement.addEventListener('mouseenter', event => {
    deleteButton.removeAttribute('hidden');
  });

  childElement.addEventListener('mouseleave', event => {
    deleteButton.setAttribute('hidden', '');
  });

  deleteButton.addEventListener('click', event => {
    childElement.setAttribute('hidden', '');
  });
});

.childElement {
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  margin-top: 10px;
  padding: 10px;
}

<div id="videos">
  <div class="childElement">
    first div
  </div>
  <div class="childElement">
    second div
  </div>
  <div class="childElement">
    third div
  </div>
</div>

Answer 2

您可以向您的数据对象添加一个名为childDivs 的数组，该数组中的哪个项目包含一个布尔值showBtn，它的值最初是false，而文本将显示在 div 元素中

更新：

当您可以在前端控制数据时，上述逻辑可能很有用，但根据 OP 的用例，我们可以将 @GenericUser 给出的脚本添加到安装的钩子中。

new Vue({
  el: '#app',
  data() {
    return {
      childDivs: [{
          text: 'First',
          showBtn: false
        },
        {
          text: 'Second',
          showBtn: false
        },
        {
          text: 'Third',
          showBtn: false
        }
      ]
    }
  },
  methods: {
    remove(i) {
      this.childDivs.splice(i, 1)

    }
  },

  mounted() {
    const childElements = document.querySelectorAll('.childElement');
    childElements.forEach(childElement => {
      const deleteButton = document.createElement('button');
      deleteButton.setAttribute('hidden', '');
      deleteButton.innerText = "delete";
      deleteButton.classList.add("btn")
      deleteButton.classList.add("btn-danger")
      childElement.appendChild(deleteButton);
      childElement.addEventListener('mouseenter', event => {
        deleteButton.removeAttribute('hidden');
      });
      childElement.addEventListener('mouseleave', event => {
        deleteButton.setAttribute('hidden', '');
      });

      deleteButton.addEventListener('click', event => {
        childElement.setAttribute('hidden', '');
      });
    });
  }

})

.childElement {
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  margin-top: 10px;
  padding: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />


<div id="app" data-app>

  <div id="videos">
    <div class="childElement">
      first div
    </div>
    <div class="childElement">
      second div
    </div>
    <div class="childElement">
      third div
    </div>
  </div>

</div>

Answer 3

试试这个代码 也使用 jquery 到你的项目 这里是这样的

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


<div id="videos">
<div class="childElement" id="divOne" >
<div id="delete">X</div>
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

<script>  
$(document).ready(function(){
  $("#divOne").hover(function(){
    $(this).css("visibility", "visible");
    }, function(){
    $(this).css("visibility", "hidden");
  });

  $("#delelte").on("click",()=>{
      $("#divOne").children().remove();
   });
});
</script>

Answer 4

你可以用 jQuery 试试这个：

$('body').on('mouseenter', '.childElement', function(e){
  
    $(this).append('<div class="remove">remove it</div>');
  
    $('.childElement').on('mouseleave', function(){
      $('.remove').remove();
    });
  
    $('body').on('click', '.remove', function(e){
      $(this).parent().remove();
    });

});

.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}

.remove {
 position:absolute;
 width: 100px;
 height: 30px;
 background: #000;
 color:#fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>