添加包含数据的新div，然后点击

时间：2015-05-29 10:35:22

标签： javascript jquery html css

我想在点击加号时添加新的div，并在点击交叉标志时将其删除。这是示例图像的link。 在加号我想添加新的行像十字标志（在行中包括颜色，大小和数量，如1和交叉标志删除）。 这是我的HTML。

<div class="row select_cart">
    <div class="col-md-12">
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control" id="attribute137" name="super_attr[137]">
                    <option>COLOR</option>
                    <option>Lime Black</option>
                    <option>Orange Black</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control">
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3 col-xs-10">
            <div class="new_select ">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-1 col-xs-2">
            <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a>
        </div>
    </div>
</div>

我可以像这样($("div[id^='myrows']").after($('#myrows').clone());)使用克隆或复制代码一次又一次地使用相同的html但是问题是如何在每行上附加特定的交叉标志并在点击时删除。我改变了我的代码

HTML :

 <div class="row2">

                </div>
JS:

    $(".add").click(function(){
           var fld = ' <div class="row select_cart2"> <div class="col-md-12"> <div class="col-sm-4"> <div class="new_select"> <select class="form-control"> <option>COLOR</option> <option>Lime Black</option> <option>Orange Black</option> </select> </div> </div> <div class="col-sm-4"> <div class="new_select"> <select class="form-control"> <option>7</option> <option>8</option> <option>9</option> </select> </div> </div> <div class="col-sm-3 col-xs-10"> <div class="new_select "> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="col-sm-1 col-xs-2"> <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt=""> </a> </div> </div> </div>';

jQuery('.row2').append(fld);

});
    $(".delete").on("click", ".button.delete", function(e){
    $(this).closest(".row.select_cart2").remove();
    e.preventDefault();
});

4 个答案:

答案 0 :(得分：1)

您可以使用parent()方法，该方法返回所选元素的直接父元素。

    $('.delete').unbind().bind('click', function(){
        $button = $(this);
        $button.parent().parent().remove();
    });

我还创建了一个DEMO

<强> 修改

更新了fiddle

答案 1 :(得分：0)

像这样的东西

＆＃13;
＆＃13; 
$('.delete').click(function(){
  $(this).parent().parent().hide();
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row select_cart">
    <div class="col-md-12">
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control" id="attribute137" name="super_attr[137]">
                    <option>COLOR</option>
                    <option>Lime Black</option>
                    <option>Orange Black</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control">
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3 col-xs-10">
            <div class="new_select ">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-1 col-xs-2">
            <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a>
        </div>
    </div>
</div>

<div class="row select_cart">
    <div class="col-md-12">
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control" id="attribute137" name="super_attr[137]">
                    <option>COLOR</option>
                    <option>Lime Black</option>
                    <option>Orange Black</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control">
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3 col-xs-10">
            <div class="new_select ">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-1 col-xs-2">
            <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a>
        </div>
    </div>
</div>

<div class="row select_cart">
    <div class="col-md-12">
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control" id="attribute137" name="super_attr[137]">
                    <option>COLOR</option>
                    <option>Lime Black</option>
                    <option>Orange Black</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control">
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3 col-xs-10">
            <div class="new_select ">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-1 col-xs-2">
            <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a>
        </div>
    </div>
</div>

<div class="row select_cart">
    <div class="col-md-12">
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control" id="attribute137" name="super_attr[137]">
                    <option>COLOR</option>
                    <option>Lime Black</option>
                    <option>Orange Black</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control">
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3 col-xs-10">
            <div class="new_select ">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-1 col-xs-2">
            <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

当你将eventListener和eventListener附加到“cross”时，你可以使用 -

识别十字架所属的行。 
$(".delete").click(function(e){
    var row = $(this).closest(".row");
    row.find("div").remove();
}

如果我已正确理解您的问题，这应该可以帮助您完成工作。

答案 3 :(得分：0)

假设您在div中包含这些元素：

<div id="container">
…
</div>

然后，您可以使用单个事件处理程序来实现所有删除：

$("div#container").on("click", ".button.delete", function(e){
    $(this).closest(".row.select_cart").remove();
    e.preventDefault();
});
相关问题
最新问题