jQuery从h1

时间:2017-12-17 16:18:14

标签: javascript jquery list

我必须建立一个购物清单,我可以在其中添加和删除列表。 在右侧有当前打开的列表标题列表。 删除列表时,标题应该消失,但不是,使用empty(),remove()或text('')。

我刚刚编辑了帖子,因此您可以看到整个HTML代码

HTML:           
<div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div id="shoppinglist">
                    <div class="header left">
                        <h2>Listen</h2>
                        <i class="glyphicon glyphicon-plus newList" ></i>
                    </div>
                    <ul class="list lists">
                        <!-- -->
                    </ul>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="header right">
                    <i class="glyphicon glyphicon-search"></i>
                    <i class="glyphicon glyphicon-menu-hamburger"></i>
                    <img src="img/profile.png" alt="profilbild">
                </div>
                <div id="listbody">
                    <div class="listheader">
                        <!--<h1>List 1</h1>-->
                    </div>
                    <div id="listitems">
                        <div class="items_container">
                            <!-- -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div id="categorylist">
                    <div class="header">
                        <h2>Kategorien</h2>
                    </div>
                    <ul class="list categories">
                        <!-- -->
                    </ul>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="header">
                    <input placeholder="Was willst du Einkaufen?" type="text" />
                </div>
                <div id="categoryitems">
                    <div class="items_container">
                        <!-- -->
                    </div>
                </div>
            </div>
        </div>
        <div id="producthover_container">
            <div id='producthover'>
                <div id='producthover_icon'>
                    <i class='glyphicon glyphicon-plus'></i>
                </div>
                <div id='producthover_detail'>
                    <span>Details <br> hinzufügen</span>
                </div>
            </div>
        </div>
    </div>


list.js:   
printHeader(){
     $(".listheader").empty();
     $(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}


shoppinglist.js:
$(".lists").on("click","i",(e) =>{
    let r = confirm("Delete?");
    if(r) {
       $(".h1header").remove();
       $(e.target).parent().remove();
    }
});

1 个答案:

答案 0 :(得分:0)

您必须从父节点中删除它。像这样:

var child = $(".h1header");
$(".listheader").removeChild(child);

或者您必须创建一个在给定子节点时执行此操作的函数