开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

删除父容器div的按钮在动态创建的div上不起作用

问题描述：删除父容器div的按钮在动态创建的div上不起作用。

解决方案：这个问题通常是由于事件委托的机制导致的。当动态创建的div元素被添加到父容器div中时，父容器div上的事件监听器不会自动应用于动态创建的div元素。为了解决这个问题，可以使用事件委托的方式来处理。

事件委托是指将事件监听器绑定到父容器上，然后通过事件冒泡的机制来触发事件。这样，无论是静态创建的div还是动态创建的div，只要它们是父容器的子元素，都能够触发相应的事件。

具体实现步骤如下：

给父容器div添加一个事件监听器，监听需要触发的事件（例如点击事件）。
在事件监听器中，判断事件的目标元素是否为动态创建的div。
如果是动态创建的div，则执行相应的操作。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>删除父容器div的按钮在动态创建的div上不起作用</title>
</head>
<body>
  <div id="parentDiv">
    <button id="deleteButton">删除</button>
  </div>

  <script>
    var parentDiv = document.getElementById('parentDiv');

    parentDiv.addEventListener('click', function(event) {
      var target = event.target;
      
      if (target.tagName.toLowerCase() === 'div') {
        // 执行删除操作
        target.parentNode.removeChild(target);
      }
    });

    // 动态创建div
    var newDiv = document.createElement('div');
    newDiv.textContent = '动态创建的div';
    parentDiv.appendChild(newDiv);
  </script>
</body>
</html>

在上述示例中，我们给父容器div添加了一个点击事件监听器。当点击父容器div中的任意一个子元素时，事件会冒泡到父容器div，然后通过判断事件的目标元素是否为动态创建的div来执行相应的操作。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）

腾讯云云服务器（CVM）是一种弹性计算服务，提供安全可靠、弹性扩展的云端计算能力。您可以根据业务需求选择不同配置的云服务器实例，快速构建和部署应用程序。

产品介绍链接地址：腾讯云云服务器（CVM）

相关搜索:css强制子div位于动态调整大小的父div的底部 Jquery:如何动态添加/删除div容器末尾的html数据 js删除a标签的父div 从动态创建的输入写入动态创建的div 使用jQuery删除动态创建的DIV 使用Jquery动态创建具有关闭div功能的按钮的div 删除上次动态创建的div 删除子div和父div之间的单个像素间隙删除空的div和父级动态创建div，但没有为动态创建的div加载tinyMce

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery点击删除按钮,删除当前的div

现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全都删掉了，但是我只需要点击哪一行div里面的删除按钮，就删除哪一行，其实很简单，只需要写一个this事件即可。 ?... ... ... // 删除按钮事件...body> 原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚

5.2K3 0

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

需求实现父 div 里面左右，上下动态分割 div，并上下改变父 div 的高度，并且宽和高都是按百分比（如图）。 ? 2....上下拖动的 arrow，当上拖动时，arrow 的父 div 的高度变小，当下拖动时，arrow 的父 div 的高度变大。...拖动改变左右的 label 时，向左时，label 的父 div 的宽变小，label 的父 div 相邻的右边的 div 宽度变大。...拖动改变上下的 label 时，向上时，label 的父 div 的高度变小，label 的父 div 相邻的下边的 div 高度变大。...不过网上的并不完整，父 div 的高也不能改变，并且孩子的宽高并不是百分比的，布局也并不合理，所以修改成这样子。

10K3 0

react 基础操作-语法、特性、路由配置

最后，我们在 JSX 中展示了计数器的值，每次点击按钮时计数器会自动增加并重新渲染。通过使用状态管理，在函数组件中更新值并触发重新渲染，可以实现页面内容的动态更新。...同时，父元素上的点击事件处理函数也会被触发。...需要注意的是，在 React 中，event.stopPropagation() 方法并不会阻止事件在组件内部的其他事件处理函数中继续执行，只会阻止事件冒泡到父元素上。...在上面的示例中，我们使用 useState 创建了一个名为 count 的状态变量，并使用 setCount 函数来更新它。点击 "Increment" 按钮时，count 的值会增加。...useEffect - 用于在组件加载后执行副作用操作。

2142 0

VUE2全家桶精讲

，给父组件发送消息通知父组件监听$emit触发的事件提供处理函数，在函数的性参中获取传过来的参数四十三、什么是props 1.Props 定义组件上注册的一些自定义属性 2.Props 作用...当点击按钮时，通过 $emit 方法触发一个自定义事件，通知父组件进行相应的操作接下来，在父组件中，需要绑定子组件的 count 属性，并监听子组件的自定义事件，执行相应的操作： App.vue <template...) 5、删除功能思路分析：监听时间（监听删除的点击）携带id 子传父，将删除的id传递给父组件App.vue 进行删除 filter (自己的数据自己负责) 6.底部功能及持久化存储思路分析：底部合计...当用户在输入框内敲击回车或者点击添加按钮时，会触发 addTodo 方法，并将 newTodoItem 的值传递给父组件。...当用户点击删除按钮时，会触发 deleteTodoItem 方法，并将对应任务的 id 传递给父组件。

2601 0

jQuery 事件注册、事件处理

on() 方法优势3：动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){...alert("俺可以给动态生成的元素绑定事件") }); $("div").append($("我是动态创建的p")); 演示代码 </...案例：发布微博案例 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中 $...}); // 2.点击的删除按钮，可以删除当前的微博留言li // 原来的方法此时的click不能给动态创建的a标签添加事件因为上面添加的a还没有触发

3.8K2 0

3-DOM

文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”...属性 parentNode 返回节点的父节点。以上方法和属性虽然都是介绍的Node节点，但由于Node节点是其他五种对象的父对象，所以其他几种对象都可以使用实例：动态表格（插入/删除） <!...var text_sex=document.createTextNode(sex); td_sex.appendChild(text_sex); //创建删除按钮的...使用innerHTML简化之前的动态表格实例 <!

1.3K2 0

从零开始学 Web 之 DOM（五）元素的创建

但是在页面加载的时候不会。...案例：动态创建列表 // 方式一 <...，返回值为一个对象元素 document.creatElement("标签的名字"); 第二步：将元素追加到父元素中父元素.appendChild(创建的对象); 示例： <input...案例：动态创建表格

8202 0

一步一步学Vue(四)

，把AB组件重构成只用来渲染数据的pure组件，数据由外部传入，而vue正好提供了这种props父传子的机制，把Ajax操作定义到父组件中（就是我们这里提到的容器组件），也起到了重复代码提取的作用，基于此请看我们的第二版代码...已经明白了容器组件的作用，那么我们来实现一下前几篇中todolist的容器组件吧，上篇已有基本结果，这里先出代码后解释： /** * 容器组件 * 说明：容器组件包括三个字组件..._mock_save(this.items); }, /** * 删除方法 * 响应删除按钮操作...$emit('onremove', $e); } } } 这两个数据渲染组件就没什么好说名的了；但是大家发现一个很不爽的问题：由于我们在容器中统一管理了业务逻辑..._mock_save(this.items); }, /** * 删除方法 * 响应删除按钮操作

1.2K1 0

vuejs中的组件以及父子组件间通信传值

,属性的绑定,事件方法监听绑定,条件渲染v-if,动态绑定class: 其中el:实例选项,值的类型是字符串或者实际html元素对象,边界管理,挂载点,确定vue的作用域范围 data:实例选项,数据，...而通过全局注册(Vue.component(tagName, options))或者局部注册的组件是子组件,在根实例的作用域范围内,父实例的模块中以自定义元素调用子组件进行使用,要注意的是确保在初始化根实例之前...既然子组件的渲染结果是由父组件决定的,想要删除子组件,就必须要更改父组件的数据,所以在删除子组件的时候,我们需要点击该子组件,子组件需要把对应的内容传给父组件，让父组件去改变数据，让父组件的数据改变了的...,通过emit方法向外触发事件的方式,当点击子组件的时候,在该子组件绑定点击click事件方法,在该子组件methods方法内,通过emit向外触发一个自定义事件在父组件创建子组件的同时可以去监听父组件...@deletelist="deleteItemFun",在父组件的这个模板当中,创建子组件的同时也监听了子组件deletelist这个事件，一旦删除事件deleteitemFun被触发的时候就会执行父组件实例下挂载的

20.4K1 0

Web如何适配无障碍？

上方这个div被选中时，屏幕阅读器会播报「HullQin的自我介绍」，而不会播报「你好，我是HullQin」。role="button"role="button"，将元素标记为按钮，。...隐藏无意义元素如果是无用元素（如不影响业务流程的logo、图片），在最内层的Dom结点设置aria-hidden="true"，或在一组无用元素的容器结点设置aria-hidden="true"。...维护成本高（若子结点需要动态改变，父结点的aria-label也需要随之改变）【推荐】父结点设置aria-labelledby，值为所有子结点的id（用空格拼接）...option表明这是个select下拉框的选项，读屏软件会错误理解该控件的作用，部分安卓机会播报“单指双击即可执行”。...结点动态变更例如按钮状态可能会在js中变为disabled，注意最好直接用原生的disabled属性，否则，你还需要手动设置aria-disabled为true。

3.5K6 3

Vue.js组件

id="app"> //通过构造器创建一个组件,相当于在vue这个全局对象本身上添加了一些新的内容,作用相当于构造函数...如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。...--父容器输入标签,会将slot标签替换掉--> 这里是父容器写入的 {{ email }} <!...var temp = ` 这里是子组件 slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西

8.9K4 0

基于 HTML5 Canvas 的工控机柜 U 位动态管理

getView() 返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些HT预定义的容器组件，则...但如果父容器是原生的 html 元素，则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。...，作用为创建一个 dialog 对话框(http://www.hightopo.com/guide/guide/plugin/dialog/ht-dialog-guide.html)，我们设置此对话框中的内容为一个...form 表单进行显示，同时还设计了两个按钮，“OK”按钮作为执行创建/更改机柜的属性，“Cancel”按钮不执行其他操作，只是将对话框隐藏： ?...实现了添加和编辑机柜的两个功能，删除机柜的功能实现上非常容易，只要将节点从拓扑图和树上移除即可： handleRemoveRack: function(){// 在拓扑图上删除机柜，并删除树上此机柜对应的节点

2.3K4 0

前端成神之路-vue03

-- 2、需要动态的数据的时候需要属性绑定的形式设置此时 ptitle 来自父组件data 中的数据 ....实现列表组件删除功能从父组件把商品列表list 数据传递过来即父向子组件传值把传递过来的数据渲染到页面上点击删除按钮的时候删除对应的数据给按钮添加点击事件把需要删除的id传递过来...子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据我们需要把数据传递给父组件让父组件操作数据父组件删除对应的数据＋ # 3.3 给按钮添加点击事件把需要删除的id传递过来 <div class="del" @click...实现组件更新数据功能上将输入框中的默认数据动态渲染出来输入框失去焦点的时候更改商品的数量子组件中不推荐操作数据把这些数据传递给父组件让父组件处理这些数据父组件中接收子组件传递过来的数据并处理

5.9K2 0

JavaScript——DOM基础

HTML DOM树中的所有节点均可以通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。...document.createElement('tagName'); 此方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点...，就动态创建一个li，添加到ul里面创建li的同时，把文本域里面的值通过li.inn......删除节点 node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点。...JavaScript案例：动态生成表格创建数据因为里面的数据都是动态的，我们需要js动态生成，所以需要准备好模拟数据，采用对象形式存储。 <...

6.5K2 0

前端三大框架之Vue-day03

-- 2、需要动态的数据的时候需要属性绑定的形式设置此时 ptitle 来自父组件data 中的数据 ....实现列表组件删除功能从父组件把商品列表list 数据传递过来即父向子组件传值把传递过来的数据渲染到页面上点击删除按钮的时候删除对应的数据给按钮添加点击事件把需要删除的id传递过来...子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据我们需要把数据传递给父组件让父组件操作数据父组件删除对应的数据＋ # 3.3 给按钮添加点击事件把需要删除的id传递过来 <div class="del" @click...实现组件更新数据功能上将输入框中的默认数据动态渲染出来输入框失去焦点的时候更改商品的数量子组件中不推荐操作数据把这些数据传递给父组件让父组件处理这些数据父组件中接收子组件传递过来的数据并处理

5.6K3 0

巧用浮动布局、解决高度塌陷实例分享|技术创作特训营第一期

面包屑导航和按钮一行两端显示面包屑或编辑栏超出宽度则自动另行显示图片实现采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。...浮动可以让一个元素脱离标准流，向左或向右移动并占据其父元素的剩余空间。浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。...高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。...overflow: hidden 是一个 CSS 属性，用于控制元素的内容是否超出其容器的边界。它可以清除浮动，但前提是浮动发生在该元素内部。...当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。

2111 1

第四篇：组件更新：完整的 DOM diff 流程是怎样的？（上）

组件的渲染过程中创建了一个带副作用的渲染函数，当数据变化的时候就会执行这个渲染函数来触发组件的更新。那么接下来，我们就具体分析一下组件的更新过程。 1. ...类型，如果不同，比如一个 div 更新成一个 ul，那么最简单的操作就是删除旧的 div 节点，再去挂载新的 ul 节点。...如果新子节点是 vnode 数组，那么先把旧子节点的文本清空，再去旧子节点的父容器下添加多个新子节点；旧子节点是空的情况： 1....如果新子节点是纯文本，那么在旧子节点的父容器下添加新文本节点即可； 2. 如果新子节点也是空，那么什么都不需要做； 3....如果新子节点是纯文本，那么先删除旧子节点，再去旧子节点的父容器下添加新文本节点； 2. 如果新子节点是空，那么删除旧子节点即可； 3.

2624 1

重学巩固你的Vuejs知识体系（上）

变量作用域：变量在什么范围内是可用的。...在Vue实例的作用范围内使用组件组件示例： <script src=".....通常在<em>创建</em>组件构造器时，传入template代表我们自定义组件<em>的</em>模板。该模板<em>在</em>使用到组件<em>的</em>地方，显示<em>的</em>html代码。这种写法<em>在</em>Vue2.x<em>的</em>文档几乎看不到了。...>我是子组件<em>的</em>内容 ` }) // <em>创建</em>一个<em>父</em>组件<em>的</em>构造器 const parentComponent = Vue.extend({ template: ` ...app = new Vue({ el: '#app' }) 编译<em>作用</em>域 Vue实例属性： <em>父</em>组件模板<em>的</em>所有东西都会在<em>父</em>级<em>作用</em>域内编译，子组件模板<em>的</em>所有东西都会在子级<em>作用</em>域内编译

5K1 0

如何在已有的 Web 应用中使用 ReactJS

菜单和日历在不同的容器中，但是它们的状态是共享的。我将用 jQuery 和 ReactJS 做的 4 个例子解释共享/独立状态的概念。...下面的代码是一个典型的 jQuery 应用，我们选择父级元素 .mood-container ，然后动态改变内容。以下是例子的 HTML： <!...在这个例子中，我们通过 .Mood__name 和 .Mood__button-name 选择器分享 mood name ，并且通过一个容器中的按钮去更新另一个容器中的 emoji 。...因为我们希望组件之间通信，所以我们将它们放置在父级组件中，然后向下传递属性来更新每个子组件。这是 ReactJS 最基本的工作方式。这种方式适用于多个 UI 组件被一个父组件包裹的情况。...很多之前创建的应用可能不适合，但是可以根据 UI 布局情况选择使用。

14.5K0 0

如何在现有的 Web 应用中使用 ReactJS

菜单和日历在不同的容器中，但是它们的状态是共享的。我将用 jQuery 和 ReactJS 做的 4 个例子解释共享/独立状态的概念。...下面的代码是一个典型的 jQuery 应用，我们选择父级元素 .mood-container ，然后动态改变内容。以下是例子的 HTML： <!...在这个例子中，我们通过 .Mood__name 和 .Mood__button-name 选择器分享 mood name ，并且通过一个容器中的按钮去更新另一个容器中的 emoji 。...因为我们希望组件之间通信，所以我们将它们放置在父级组件中，然后向下传递属性来更新每个子组件。这是 ReactJS 最基本的工作方式。这种方式适用于多个 UI 组件被一个父组件包裹的情况。...很多之前创建的应用可能不适合，但是可以根据 UI 布局情况选择使用。

7.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭