空白の<input>を消したいです。

前提

・制作中のアプリの大体の流れは下記通り：
(1) 主機能は二つあり、「登録機能」と「検索機能」です。
(2)「登録機能」：入力されたデータをPHP経由、データベースに登録します。
(3)「検索機能」：入力されたIDを利用し、データベース中、同じIDの1 rowのデータを取得します。➡ localstorageに保存します。➡HTMLに反映します。

発生している問題

・動画の00:13～00:18の問題を解決したいです。(下図は動画のscreen shotです)
https://youtu.be/e734Q7TB9qo

・もしかして、問題になるコードは下記ではないかと思います。
$ID = "";
$member_name = "";
上記のコードをセットしたので、空白が出てきたではないでしょうか？
しかし、それを削除してたら、おかしくなります。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    
</head>
<body>
    <?php include('./user_list.php') ?>
    
    <!-- 👇登入區塊 -->
    <form action="./insert.php" method="post" enctype="multipart/form-data">
        ID:<input type="text" name="idd"><br>
        Name:<input type="text" name="user_name"><br>
        <input type="submit" value="記入">
    </form>

    <!-- 👇檢索區塊 -->
    <form action="" id="search" method="post" enctype="multipart/form-data">
    ID:<input type="text" name="ss" id="ss"><br>
    <input type="submit" name="submit" value="検索">
    </form>


    <?php

    // 👇利用isset來確認form中的資料有無被送出
    if(isset($_POST['ss'])){
        $search = $_POST['ss'];
        $sql2 = "SELECT * FROM user_list WHERE id = '$search' ";
        $sth2 = $db -> prepare($sql2);
        $sth2 -> execute();
        $data2 = $sth2->fetch();

        $sql10 = "SELECT * FROM `user_list` WHERE ID in ('$search')";
        $sth10 = $db -> prepare($sql10);
        $sth10 -> execute();
        $data10 = $sth10->fetchall();

        if(empty($_POST['ss'])){
            echo '<script> alert("記入してください") </script>';
        }else{
            if($data10 == null){
                echo '<script> alert("まだ登録されていないよ!!!") </script>';
            }else{
                $ID = $data2["ID"];
                $member_name = $data2["member_name"];
            }
        } 
    }
    ?>
    
    <section class="search_outcome"> <!-- 👈包含全部結果的<section> -->
        <div class="title">  <!-- 👈包含一項結果的<div>-->
            <div class="col_ID">
                <input type="text" value="ID" readonly>
            </div>
            <div class="col_name">
                <input type="text" value="NAME" readonly>
            </div>
        </div>
        <div class="list_for_all" id="list_for_all"></div>
        <!-- 👆一開始時先做個空區塊，待日後由JS帶入資料 -->
        
    </section>



    <script>

        
        // 👇找尋form的ID
        LIST_Storage = JSON.parse(localStorage.getItem('LIST_Storage')) || [];
        const search = document.querySelector('#search');
        // 如果console.log(search)的話，會得到form中所有的程式碼。
        

        const outcome_list = {
            ID_list:'<?= $ID ?>',
            Member_list:'<?= $member_name ?>'}
        LIST_Storage.push(outcome_list);
        localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage));
        
        DisplayOutcomes()
        
        function DisplayOutcomes () {
            const outcomeList = document.querySelector('#list_for_all'); //👈包含全部結果的<div>
            outcomeList.innerHTML = "";
            LIST_Storage.forEach(outcome_list => {
                const outcome_one_div = document.createElement('div'); //👈包含一項結果的<div>
                const col_ID = document.createElement('div');　//👈包含第一欄結果的<div>
                const col_NAME = document.createElement('div'); //👈包含第二欄結果的<div>
                const col_btn = document.createElement('div'); //👈包含2個按鈕的<div>
                const revise = document.createElement('button'); //👈"修改"的按鈕
                const delete_btn = document.createElement('button'); //👈"刪除"的按鈕
                //console.log(delete_btn);

                outcome_one_div.classList.add('list_for_one');
                col_ID.classList.add('col_ID');                
                col_NAME.classList.add('col_name');
                col_btn.classList.add('col_btn');
                revise.classList.add('revise');
                delete_btn.classList.add('delete');
                
                

                col_ID.innerHTML = `<input type="text" value="${outcome_list.ID_list}" readonly>`;
                col_NAME.innerHTML = `<input type="text" value="${outcome_list.Member_list}" readonly>`;
                revise.innerHTML = '修正';
		        delete_btn.innerHTML = '削除';

                col_btn.appendChild(revise);
                col_btn.appendChild(delete_btn);
                outcome_one_div.appendChild(col_ID);
                outcome_one_div.appendChild(col_NAME);
                outcome_one_div.appendChild(col_btn);
                outcomeList.appendChild(outcome_one_div);
                console.log(outcomeList);
                
                delete_btn.addEventListener('click', (e) => {
                LIST_Storage = LIST_Storage.filter(LIST_Storage => LIST_Storage != outcome_list);
                localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage));
                DisplayOutcomes()
                })
            })
        }
    </script>

    



</body>
</html>

補足情報（FW/ツールのバージョンなど）

👇localstorageのデータをHTML内に反映する方法について、下記画動画を参考しました。
https://www.youtube.com/watch?v=6eFwtaZf6zc

m.ts10806

2022/11/06 03:08

もし英語のほうが得意なのであればstackoverflowのほうが有益と思います。

YUMINAGA

2022/11/06 03:33

m.ts10806　様、いつもコメントありがとうございます。英語も問題ないですが、やっぱり日本語の方が親しみを感じています。(笑) なぜstackoverflowを薦めますか？

m.ts10806

2022/11/06 03:44

stackoverflow本体は英語だからです。母国語を無理に日本語にするよりも英語のほうが伝わりやすいこともあります。台湾となると北京語主体のいわゆる「中国語」とも違いますしね。

m.ts10806

2022/11/06 03:46

まぁどうするかはお任せします。 PHPは割と回答率は高い方のはずが、この質問に誰も回答やコメントをしないということは、日本語を母国語とする人とのやりとりより難しくなる印象があるからかもしれませんし。

m.ts10806

2022/11/06 03:49 編集

ひとまず私としてのこの質問を見た「感想」になりますが、・何を解決したいのか分からない・何が問題なのか分からない・何が起きていて「問題になるコードは下記」と出しているのか分からない（動画をわざわざ見て回答というのは、かなり億劫なので、あくまで「参考」として提示するにとどめて、質問者からきちんと説明した方が良いです）というところでしょうか。日本語の問題というより、単純に説明が不足しているように感じました。

YUMINAGA

2022/11/06 05:23

ご指摘、誠にありがとうございます。修正致します。

行動規範の内容に同意します

回答2件

自己解決

やっぱり空白が出る理由は下記2列のコードです。
現在解決ました。
$ID = "";
$member_name = "";

投稿2022/11/13 09:50

YUMINAGA

総合スコア45

localStorageからLIST_Storageを取り出して、pushしてsetしているのであれば
リロード時に空データが追加されるのが仕様では？
それをやめたいならフローを見直してください

投稿2022/11/07 03:55

yambejp

総合スコア114843

YUMINAGA

2022/11/07 04:49

ご回答、ありがとうございます。コード内容を修正しました。現在、空データが追加される問題が解決しました。しかし、画面をリロードするとき、フォーム送信で起きる二重送信が発生しました。現在下記二つのWEB内容を参考し、問題解決しているところ。　・https://qiita.com/syobochim/items/120109315f671918f28d 　・https://tech.amefure.com/php-redirect