js或者jquery，点击删除删除某个div问题

如何点击删除的时候删除这一样的div？<html><head></head><body><divclass="row"id="monitorTimeDiv"style="... 如何点击删除的时候删除这一样的div？

<html>
<head></head>
<body>
<div class="row" id="monitorTimeDiv" style="margin-top: 10px;">
<div class="row" style="margin-top: 10px;">
<div class="col-md-5">
<div style="float: left;padding-left: 85px;margin-top: 5px;">
<label class="control-label">开始时间：</label>
</div>
<div>
<input type="text" style="width: 125px;margin-left: 165px;" id="begintime" class="form-control timepicker timepicker-24" value="13:00:00" />
</div>
</div>
<div class="col-md-5">
<div style="float: left;padding-left: 30px;margin-top: 5px;">
<label class="control-label">结束时间：</label>
</div>
<div>
<input type="text" style="width: 125px;" id="endtime" class="form-control timepicker timepicker-24" value="18:00:00" />
</div>
</div>
<div class="col-md-1">
<a style="float: left;margin-top: 10px;" onclick="deleteRow();">删除</a>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-5">
<div style="float: left;padding-left: 85px;margin-top: 5px;">
<label class="control-label">开始时间：</label>
</div>
<div>
<input type="text" style="width: 125px;margin-left: 165px;" id="begintime" class="form-control timepicker timepicker-24" />
</div>
</div>
<div class="col-md-5">
<div style="float: left;padding-left: 30px;margin-top: 5px;">
<label class="control-label">结束时间：</label>
</div>
<div>
<input type="text" style="width: 125px;" id="endtime" class="form-control timepicker timepicker-24" />
</div>
</div>
<div class="col-md-1">
<a style="float: left;margin-top: 10px;" onclick="deleteRow();">删除</a>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-5">
<div style="float: left;padding-left: 85px;margin-top: 5px;">
<label class="control-label">开始时间：</label>
</div>
<div>
<input type="text" style="width: 125px;margin-left: 165px;" id="begintime" class="form-control timepicker timepicker-24" />
</div>
</div>
<div class="col-md-5">
<div style="float: left;padding-left: 30px;margin-top: 5px;">
<label class="control-label">结束时间：</label>
</div>
<div>
<input type="text" style="width: 125px;" id="endtime" class="form-control timepicker timepicker-24" />
</div>
</div>
<div class="col-md-1">
<a style="float: left;margin-top: 10px;" onclick="deleteRow();">删除</a>
</div>
</div>
</div>
</body>
</html> 展开

 我来答

4个回答

#热议# 为什么说不要把裤子提到肚脐眼？

帐号已注销

高粉答主

2020-01-17 · 关注我不会让你失望

知道小有建树答主

回答量：1346

采纳率：100%

帮助的人：37.1万

我也去答题访问个人页

关注

展开全部

1、新建HTML文件。

2、引入jquery.min.js文件。

3、创建div和按钮并添加class样式。

4、接下来需要创建css样式。

5、创建js点击事件。

6、当点击按钮移除div元素。

7、点击按钮效果如图所示。

扩展资料

1、<body></body> 所有div应该都放在body里面应该这个才是内容区你把他们反正不是头和内容直接，网页解析肯定会出错的。

2、样式区域<style> 在里面必须加上type="text/css"这样才能搞错浏览器这部分为CSS样式部分，用CSS去解析而不是HTML。

3、内容区镶套了大量的多余DIV这属于多DIV症，这样会导致页面镶套混乱，然后加上你的那多浮动会出现做迷藏事件。

4、浮动后没有清楚浮动这样会产生很多的影响。

已赞过 已踩过<

评论收起

百度网友faadf46

高粉答主

2019-08-13 · 说的都是干货，快来关注

知道答主

回答量：4556

采纳率：0%

帮助的人：76.2万

我也去答题访问个人页

关注

展开全部

1、新建HTML文件。

2、引入jquery.min.js文件。

3、创建div和按钮并添加class样式。

4、接下来需要创建css样式。

5、创建js点击事件。

6、当点击按钮移除div元素。

7、点击按钮效果如图所示。

本回答被网友采纳

已赞过 已踩过<

评论收起

ygh31500
推荐于2018-02-26 · TA获得超过158个赞

知道答主

回答量：118

采纳率：100%

帮助的人：126万

我也去答题访问个人页

关注

展开全部

最好是这样:

<div class="col-md-5 rep"> 我加了 rep 样式

<div class="col-md-5 rep">
     <div style="float: left;padding-left: 30px;margin-top: 5px;">
      <label class="control-label">结束时间：</label>
     </div>
     <div>
      <input type="text" style="width: 125px;" id="endtime" class="form-control timepicker timepicker-24" />
     </div>
    <div class="col-md-1">
     <a style="float: left;margin-top: 10px;"
          onclick="deleteRow($(this));">删除</a>
    </div>
</div>

方法: 点用的时候传一个参数

function deleteRow(obj) {
    obj.parents(".rep").remove();
}

我自己写了一个公用方法:

/**
 * 找到 obj 元素的父级元素class=pclass的第一父元素，并将其移除
 * @param objjquery 对象
 * @param pclass父级元素的class样式
 * @param isone是否需要保留一条 默认: false
 */
function sys_remove_element(obj, pclass, isone) {
var one = false;
if ('' != isone && undefined != isone && (true === isone || 'true' == isone)) {
one = true;
}
var p = obj.parents('.' + pclass);
if (one) {
if (p.prev('.' + pclass).length == 0 && p.next('.' + pclass).length == 0) {
alert('至少保留一条');
return false;
} else {
p.remove();
}
} else {
p.remove();
}
return true;
}

本回答被网友采纳

已赞过 已踩过<

评论收起

烟灰的末日889
2014-11-14 · TA获得超过493个赞

知道小有建树答主

回答量：197

采纳率：0%

帮助的人：183万

我也去答题访问个人页

关注

展开全部

你的代码结果好像不太，合理，时间太紧，所以就不写代码了
最好把每一行作为一个整体，比如说包在一个div里面，或者tr里面。
这样的话，实现效果就简单了。
点击删除，获取对应的tr或者div，然后用remove（）方法。

写了个简单的代码，给你参考下：
<html>
 <head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

        <script type="text/javascript">
            $(function () {
                             $(".shanchu").click(function () {
                    $(this).parent().remove();

})
            })
            
        </script>

</head>
 <body>
<table border="1">
<tr>
<td>开始时间</td>
<td><input type="text" value="1"></td>
<td>结束时间</td>
<td><input type="text"></td>
<td class="shanchu">删除</td>
</tr>
<tr>
<td>开始时间</td>
<td><input type="text" value="2"></td>
<td>结束时间</td>
<td><input type="text"></td>
<td class="shanchu">删除</td>
</tr>
<tr>
<td>开始时间</td>
<td><input type="text" value="3"></td>
<td>结束时间</td>
<td><input type="text"></td>
<td class="shanchu">删除</td>
</tr>
<tr>
<td>开始时间</td>
<td><input type="text" value="4"></td>
<td>结束时间</td>
<td><input type="text"></td>
<td class="shanchu">删除</td>
</tr>
<tr>
<td>开始时间</td>
<td><input type="text" value="5"></td>
<td>结束时间</td>
<td><input type="text"></td>
<td class="shanchu">删除</td>
</tr>
</table>
 </body>
</html>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

超级码客~2025版海量JQuery面试题+笔试题&答案

超级码客涵盖jquery常见面试题&Web前端工程师面试题#H5，CSS，JavaScript，Vue，前端等在内超3500题

www.chaojimake.cn广告

js或者jquery，点击删除删除某个div问题

您可能关注的内容

其他类似问题

为你推荐：