Question

在这种情况下，我点击一个表格单元格，它是一个行id和单元格值的集合，并动态创建一个

元素并将行id和单元格值放入其中。但问题是当特定单元格上的click事件被触发两次时，它会复制

元素。有两种方法可以在单击两次时删除重复元素。比如如果有人在添加

后点击一个单元格并单击两次就删除

不重复。

（抱歉我的英语不好，希望你能理解这个问题。）

这是HTML TABLE

    <table border="1" width="200px" id="grid">
    <tr id="101">
        <td class="left"><span>10</span><br/><a>5690</a></td>
        <td class="right"><span>656</span><br/><a>5645</a></td>
    </tr>
    <tr id="102">
        <td class="left"><span>11</span><br/><a>545</a></td>
        <td class="right"><span>525</span><br/><a>564564</a></td>
    </tr>
    <tr id="103">
        <td class="left"><span>6565</span><br/><a>56456</a></td>
        <td class="right"><span>5456</span><br/><a>56465</a></td>
    </tr>
</table>
<div class="content"></div>

这是Jquery

$("#grid td.left").click(function() {
                var itemid = $(this).closest("tr").attr("id");
                var currentrate = $(this).find("span").text();
                var offeredammount = $(this).find("a").text();

                $(".content").after("<p style='background-color:#F0F8FF'>" + itemid + " " + currentrate + " " + offeredammount + "</p>");
            });

直播示例

http://jsfiddle.net/re5fohdq/4/

Answer 1

给一个类来创建p标签并像这样玩

$("#grid td.left").click(function() {
var itemid = $(this).closest("tr").attr("id");

if($('.p-'+itemid).length ){
  $('.p-'+itemid).remove();
}else{
var currentrate = $(this).find("span").text();
var offeredammount = $(this).find("a").text();
$(".content").after("<p style='background-color:#F0F8FF' class='p-"+itemid+"'>" 
 + itemid + " " + currentrate + " " + offeredammount + "</p>");
 }        
});

这是工作小提琴

<强> Working Demo

Answer 2

试试这个：在添加ID时将id添加到p标记并检查它是否存在并相应地添加/删除。

    $("#grid td.left").on("click", function() {
        var itemid = $(this).closest("tr").attr("id");
        var currentrate = $(this).find("span").text();
        var offeredammount = $(this).find("a").text();

        var alreadyExist = $("p[id='"+itemid+"']").length;

        if(alreadyExist>0)
        {
            $("p[id='"+itemid+"']").remove();
        }
        else
        {
            $(".content").after("<p style='background-color:#F0F8FF' id='"+itemid+"'>" + itemid + " " + currentrate + " " + offeredammount + "</p>");
        }
   });

<强> DEMO

Answer 3

使用以下内容更新您的脚本：

更新了脚本

$("#grid td.left").click(function () {
    $(".content").empty();
    var itemid = $(this).closest("tr").attr("id");
    var currentrate = $(this).find("span").text();
    var offeredammount = $(this).find("a").text();    
    $(".content").append("<p style='background-color:#F0F8FF'>" + itemid + " " + currentrate + " " + offeredammount + "</p>");
});

Fiddle Demo

添加/删除/切换元素onClick而不重复

3 个答案: