Question

所以我正在创建一个搜索网站，用户输入名称或全名的一部分，然后按下按钮。根据输入的字符串，它会显示包含字符串或子字符串的actor名称的提示。名称存储在mysql数据库中。

我能够通过使用ajax与php和php交互来与mysql数据库交互来完成所有这些。但是，如果用户什么都不输入，它应该什么都不显示。

所以我只是在字段文本为空时删除所有名称（换句话说，我只删除div的所有p元素）。

这就是问题所在。即使我使用element.removeChild()，它也不会删除任何内容。相反，即使字符串为空并且用户按下按钮，它也会保留与先前搜索相同的信息。我已经搜索了关于removeChild()的类似问题，但我找到的答案或提示都没有对我有用。

下面是javascript和html代码。

        var array = [];
        var str = "";
        var clicked_id = "";
        var body = document.getElementsByTagName('BODY')[0];
        var actors = document.getElementById('actors');
        var roles = document.getElementById('roles');

        actors.addEventListener("click", function(){
            getData(this.id);
        }, false);
        roles.addEventListener("click", function(){
           getData(this.id); 
        }, false);
        
        function getData(myid) {
            str = document.getElementById('mytext').value;
            clicked_id = myid;
            var id = "roles";
            console.log(clicked_id);
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {
                    array = JSON.parse(xmlhttp.responseText);
                    
                    var element = document.createElement('div');
                    element.id = "mydiv";

                    if (str == "" && element.hasChildNodes() != null) {
                        while (element.hasChildNodes()) {
                            element.removeChild(element.lastChild);
                        }
                    } else {
                        for (var i = 0; i < array.length; i++) {
                            var p = document.createElement('p');
                            p.append(array[i]);
                            element.append(p);
                        }
                        body.append(element);
                    }
                }
            };
            xmlhttp.open("GET", "controller.php?q="+str , true);
            xmlhttp.send();
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Search for either all roles or all actors in the database imdb_small</h2>
    <hr> Search string <br>
    <input type="text" id="mytext"> <br>
    <input type="button" value="Actors" id="actors">
    <input type="button" value="Roles"  id="roles" > <br> <br>
    <hr> <br><br>
</body>

Answer 1

＆＃13;

        var array = [];
        var str = "";
        var clicked_id = "";
        var body = document.getElementsByTagName('BODY')[0];
        var actors = document.getElementById('actors');
        var roles = document.getElementById('roles');

        actors.addEventListener("click", function(){
            getData(this.id);
        }, false);
        roles.addEventListener("click", function(){
           getData(this.id); 
        }, false);
        
        function getData(myid) {
            str = document.getElementById('mytext').value;
            clicked_id = myid;
            var id = "roles";
            console.log(clicked_id);
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {
                    array = JSON.parse(xmlhttp.responseText);
                    
                    // Check for an existing mydiv first here, before creating a new one
                    // If it exists then get it and check its child nodes

                    var element = document.getElementById('#mydiv');
                    element = element ? element : document.createElement('div');
                    element.id = "mydiv";

                    if (str == "" && element.hasChildNodes() != null) {
                        while (element.hasChildNodes()) {
                            element.removeChild(element.lastChild);
                        }
                    } else {
                        for (var i = 0; i < array.length; i++) {
                            var p = document.createElement('p');
                            p.append(array[i]);
                            element.append(p);
                        }
                        body.append(element);
                    }
                }
            };
            xmlhttp.open("GET", "controller.php?q="+str , true);
            xmlhttp.send();
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Search for either all roles or all actors in the database imdb_small</h2>
    <hr> Search string <br>
    <input type="text" id="mytext"> <br>
    <input type="button" value="Actors" id="actors">
    <input type="button" value="Roles"  id="roles" > <br> <br>
    <hr> <br><br>
</body>

＆＃13;

为什么removeChild（）在我的代码中不起作用？使用Javascript

1 个答案: