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

Posted 2023-02-23

【中文标题】Vue.js - 在悬停时添加删除按钮并在按下按钮时删除它

【英文标题】：Vue.js - Add delete button on hover and delete it on button press

【发布时间】：2019-06-07 05:48:12

【问题描述】：

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

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>

【问题讨论】：

那么 GenericUser 的回答出了什么问题？

这是我正在寻找的解决方案。他的回答没有错

我将他的脚本放在 Vue 实例的挂载钩子中，并删除了我之前所做的逻辑

【参考方案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>

【参考方案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>

【讨论】：

谢谢，但是我从外部服务器获取的数据具有我提到的结构，所以我无法将它们拆分为子数据对象和 for 循环。

你能展示一下你是怎么做到的吗？以及您想如何删除项目？

这是我从服务器得到的，视频可以有任意数量的 childElements first div 第二个 div 第三个 div

请看GenericUser提供的解决方案，你就会明白我在说什么

对不起，我误会你了

【参考方案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>

【讨论】：

对不起，我没有在这里使用 JQUERY。只有 CSS/javascript/VUEJS

【参考方案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>

【讨论】：

对不起，我没有在这里使用 JQUERY。只有 CSS/JavaScript/VUEJS

@Bujji 下次请添加更多信息（如 ONLY 原生 js ）以避免这种情况，因为 jQuery 是一个 JavaScript 图书馆

对不起。谢谢你，我会确保