用jquery删除div(Removing divs with jquery)
我一直在尝试将删除功能应用到我的html页面，但直到现在还没有结果。 我有三行，他们都有一个删除按钮，我想创建一个效果，当您单击删除按钮时，整个行块消失。 任何帮助将深表感谢。
HTML
<div class="row deletedRow"> <div class="col1"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="../stylesheets/shore-excursions/images/background/photo1.jpg" alt="" height="124" width="155" /></td> <td> <h3>Velit mauris scelerisque risus lorem vatis</h3> <p>Grand Cayman, Cayman Islands</p> <ul> <li>Duration 3.5 hours</li> <li>Ages 8 & Up</li> <li>Moderate Activity <span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" /> <div> <span class="arrow"></span> <p class="red">Lorem ipsum dolor.</p> <p>Lorem ipsum dolor sit nostrud mas consectetur </p> </div> </span> </li> </ul> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a> </td> <td></td> </tr> </tbody> </table> </div> <div class="col2"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="with-border"> <p>Adults:</p><p class="red">$100</p> </td> </tr> <tr> <td> <p>Children:</p><p class="red">$60</p> </td> </tr> <tr> <td> <p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p> </td> </tr> <tr> <td> <a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a> </td> </tr> </tbody> </table> </div> </div> <div class="row deletedRow"> <div class="col1"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="../stylesheets/shore-excursions/images/background/photo2.jpg" alt="" height="124" width="155" /></td> <td> <h3>Velit mauris scelerisque risus lorem vatis</h3> <p>Grand Cayman, Cayman Islands</p> <ul> <li>Duration 3.5 hours</li> <li>Ages 7 & Up</li> <li>Moderate Activity <span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" /> <div> <span class="arrow"></span> <p class="red">Lorem ipsum dolor.</p> <p>Lorem ipsum dolor sit nostrud mas consectetur </p> </div> </span> </li> </ul> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a> </td> <td></td> </tr> </tbody> </table> </div> <div class="col2"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="with-border"> <p>Adults:</p><p class="red">$100</p> </td> </tr> <tr> <td> <p>Children:</p><p class="red">$60</p> </td> </tr> <tr> <td> <p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p> </td> </tr> <tr> <td> <a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a> </td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col1"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="../stylesheets/shore-excursions/images/background/photo3.jpg" alt="" height="124" width="155" /></td> <td> <h3>Velit mauris scelerisque risus lorem vatis</h3> <p>Grand Cayman, Cayman Islands</p> <ul> <li>Duration 3.5 hours</li> <li>Ages 7 & Up</li> <li>Moderate Activity <span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" /> <div> <span class="arrow"></span> <p class="red">Lorem ipsum dolor.</p> <p>Lorem ipsum dolor sit nostrud mas consectetur </p> </div> </span> </li> </ul> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a> </td> <td></td> </tr> </tbody> </table> </div> <div class="col2"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="with-border"> <p>Adults:</p><p class="red">$100</p> </td> </tr> <tr> <td> <p>Children:</p><p class="red">$60</p> </td> </tr> <tr> <td> <p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p> </td> </tr> <tr> <td> <a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a> </td> </tr> </tbody> </table> </div> </div>先谢谢你！
I have been trying to apply the remove function to my html page but with no result until now. I have three rows and they all have a remove button, I would like to create an effect that when you click on the remove button the whole row block disappears. Any help would be deeply appreciated.
HTML
<div class="row deletedRow"> <div class="col1"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="../stylesheets/shore-excursions/images/background/photo1.jpg" alt="" height="124" width="155" /></td> <td> <h3>Velit mauris scelerisque risus lorem vatis</h3> <p>Grand Cayman, Cayman Islands</p> <ul> <li>Duration 3.5 hours</li> <li>Ages 8 & Up</li> <li>Moderate Activity <span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" /> <div> <span class="arrow"></span> <p class="red">Lorem ipsum dolor.</p> <p>Lorem ipsum dolor sit nostrud mas consectetur </p> </div> </span> </li> </ul> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a> </td> <td></td> </tr> </tbody> </table> </div> <div class="col2"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="with-border"> <p>Adults:</p><p class="red">$100</p> </td> </tr> <tr> <td> <p>Children:</p><p class="red">$60</p> </td> </tr> <tr> <td> <p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p> </td> </tr> <tr> <td> <a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a> </td> </tr> </tbody> </table> </div> </div> <div class="row deletedRow"> <div class="col1"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="../stylesheets/shore-excursions/images/background/photo2.jpg" alt="" height="124" width="155" /></td> <td> <h3>Velit mauris scelerisque risus lorem vatis</h3> <p>Grand Cayman, Cayman Islands</p> <ul> <li>Duration 3.5 hours</li> <li>Ages 7 & Up</li> <li>Moderate Activity <span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" /> <div> <span class="arrow"></span> <p class="red">Lorem ipsum dolor.</p> <p>Lorem ipsum dolor sit nostrud mas consectetur </p> </div> </span> </li> </ul> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a> </td> <td></td> </tr> </tbody> </table> </div> <div class="col2"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="with-border"> <p>Adults:</p><p class="red">$100</p> </td> </tr> <tr> <td> <p>Children:</p><p class="red">$60</p> </td> </tr> <tr> <td> <p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p> </td> </tr> <tr> <td> <a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a> </td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col1"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="../stylesheets/shore-excursions/images/background/photo3.jpg" alt="" height="124" width="155" /></td> <td> <h3>Velit mauris scelerisque risus lorem vatis</h3> <p>Grand Cayman, Cayman Islands</p> <ul> <li>Duration 3.5 hours</li> <li>Ages 7 & Up</li> <li>Moderate Activity <span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" /> <div> <span class="arrow"></span> <p class="red">Lorem ipsum dolor.</p> <p>Lorem ipsum dolor sit nostrud mas consectetur </p> </div> </span> </li> </ul> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a> </td> <td></td> </tr> </tbody> </table> </div> <div class="col2"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="with-border"> <p>Adults:</p><p class="red">$100</p> </td> </tr> <tr> <td> <p>Children:</p><p class="red">$60</p> </td> </tr> <tr> <td> <p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p> </td> </tr> <tr> <td> <a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a> </td> </tr> <tr> <td> <a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a> </td> </tr> </tbody> </table> </div> </div>Thank you in advance!
原文：https://stackoverflow.com/questions/4016904
更新时间：2023-06-23 14:06
最满意答案
您可以使用简单的循环语句：
success: function(data){ var i, l; for (i = 0, l = data.length; i < l; i++) { // access the object: data[i] console.log(data[i]); } }这是最有效的方式。
You can use a simple loop statement:
success: function(data){ var i, l; for (i = 0, l = data.length; i < l; i++) { // access the object: data[i] console.log(data[i]); } }This is the most effiecient way.
相关问答
更多-
Angular并不是为了帮助您，Angular适用于应用程序的其他部分（例如UI）。 如果你想这样做，在JS中很简单： var list = [{'id':1, 'name':'John'}, {'id':2, 'name':'Jane'}, {'id':3, 'name':'Pete'}] var names = [] for(var idx in list) { names.push(list[idx]['name']) } 你还提到了一个关联数组，在JS中你有对象，它的工作方式类似，但我不明白你 ...
-
循环通过JSON数组(Loop through JSON Array)[2023-11-04]
json_decode()不返回数组。 要做到这一点，你需要做json_decode($_REQUEST['names'], true) http://php.net/manual/en/function.json-decode.php json_decode() doesn't return an array. To get it to do so you'd need to do json_decode($_REQUEST['names'], true) http://php.net/manual/en ... -
尝试正确拼写LENGTH： result.lenght应该是： result.length Try spelling LENGTH correctly: result.lenght should be: result.length
-
用这个： for (var i = 0; i < response.Album_list.length; i++) { var album = response.Album_list[i]; console.log(album); } 关于in循环的文档 因为我看到你正在使用jQuery。 你可以这样做： $.each(response.Album_list, function(index, album) { console.log(album); }); Use this: fo ...
-
您可以使用简单的循环语句： success: function(data){ var i, l; for (i = 0, l = data.length; i < l; i++) { // access the object: data[i] console.log(data[i]); } } 这是最有效的方式。 You can use a simple loop statement: success: function(data) ...
-
几乎。 尝试这个： function generateMarkers(locations) { for (var i = 0; i < locations.length; i++) { var coords = locations[i].split(","); new google.maps.Marker({ position: new google.maps.LatLng(coords[0], coords[1]), map: map, title: ...
-
你必须首先使用JSON.parse(json["items"])解析你的数组JSON.parse(json["items"])然后如果你想要一个特定的索引json_array[0]["id"]或者json_array[0]["snippet"]["thumbnails"]那么访问你的数据json_array[0]["snippet"]["thumbnails"] You have to parse your array first using JSON.parse(json["items"]) Then a ...
-
为什么不...... if ( obj.DataArray[i].Category == 'Delicious Treats' ) addOption(document.drop_list.item, obj.DataArray[i].Price, obj.DataArray[i].ItemName); Why not just... if ( obj.DataArray[i].Category == 'Delicious Treats' ) addOption(document.dr ...
-
Javascript Json内循环(Javascript Json inside loop)[2022-09-23]
function nextItem(i) { if(i < numitems) { var currentitem = items[i]; $.getJSON("http://localhost/items.php", {'itemname' : currentitem}, function (json) { alert (json); nextItem(i + 1); }); } } nextItem(0); 将它放在 ... -
首先，您的JSON无效。 你错过了逗号和引号。 { "listOfVal": [ val1, val2, val3 ], "name": "app", "id": "9209629", ... } 一旦你有data ，用for循环迭代它。 您可以使用indexOf ，但这在IE < 9不起作用 function isInJSON(data, value){ for(var i=0; i
相关文章
更多- 请问一个jQuery的问题，谢谢
- jquery 问题
- jquery 效果实现,div失去焦点
- jQuery中$与$()的区别?
- 找一个JQuery的控件
- jQuery Mobile 的特性
- 黑马的jquery教学视频
- jquery 插件开发
- Jquery EasyUI系列教程3
- jquery与servlet交互的json问题
最新问答
更多- 您如何使用git diff文件，并将其应用于同一存储库的副本的本地分支？(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
- 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
- OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
- 页面加载后对象是否有资格进行垃圾回收？(Are objects eligible for garbage collection after the page loads?)
- codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
- 在计算机拍照在哪里进入
- 使用cin.get（）从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
- No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
- 单页应用程序：页面重新加载(Single Page Application: page reload)
- 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
- System.StackOverflow错误(System.StackOverflow error)
- KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
- 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
- android - 如何避免使用Samsung RFS文件系统延迟/冻结？(android - how to avoid lag/freezes with Samsung RFS filesystem?)
- TensorFlow：基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
- 企业安全培训的各项内容
- 错误：RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
- C＃类名中允许哪些字符？(What characters are allowed in C# class name?)
- NumPy：将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全？(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
- 注销后如何隐藏导航portlet？(How to hide navigation portlet after logout?)
- 将多个行和可变行移动到列(moving multiple and variable rows to columns)
- 提交表单时忽略基础href，而不使用Javascript(ignore base href when submitting form, without using Javascript)
- 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
- Angular $资源不会改变方法(Angular $resource doesn't change method)
- 在Angular 5中不是一个函数(is not a function in Angular 5)
- 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
- 不适用：悬停在悬停时：在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
- 常见的python rpc和cli接口(Common python rpc and cli interface)
- Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
- 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)