Vanilla Javascript使用关联键删除$ _SESSION值，而不是该值

Question

编辑：如果我能够使用JS中的sessionStorage来访问会话数据，无论如何通过php或AJAX创建会话数据，那么为什么我不能使用JS删除sessionData？ sessionStorage（顾名思义）仅在浏览器会话期间可用（并在关闭选项卡或窗口时删除）-确实可以，但是在页面重新加载后仍然有效（源DOM存储指南-Mozilla开发人员网络）

[此外，如果有人可以建议使用AJAX进行此操作的方法，我将不胜感激！

我正在构建用户生成的表单生成器，并将值保存在php页面的$_SESSIONS中。我正在使用一个随机的字母数字生成器来创建两个标识标签属性，然后如果用户愿意的话，这些属性将用于删除创建的输入。删除操作是通过普通JS完成的，需要在加载页面之前进行。

好的，为了在每次解析表单并将数据构建到输入标签中时保存表单数据的多个提交，我正在使用SESSIONS。我正在$_SESSIONS数组内使用关联数组设置$_SESSION['form']，然后构建输出。

[我的问题是我在Javascript中具有的删除功能对于DOM可以正常工作，但是我想使用JS Delete按钮来重置$_SESSION['form']['content']['randomly-generated-alphanumeric-number']，这对于用户创建的输入是唯一的。

最终，我将通过适当的html实体来全部运行这些操作，以删除标签并适当地添加它们，现在，我只是在使用代码应用程序来测试功能。

请注意，随机字符是动态生成的，并通过php插入HTML和SESSIONS。

这里是vardump($_SESSION['form']['content'])

array {
  ["m2HRvKPdDL"]=>
  string(313) "
    <div id="m2HRvKPdDL" class="input-type">
        <label>First Name: </label>
        &lt;input type="text" id="fname" class="input-type" name="first_name"&gt;<input type="button" alt="m2HRvKPdDL" id="deleteInput" class="deletInput" value="Delete this field"> <span id="deleteMSG"></span>
    </div>
    "
}

这里是创建此$_SESSION并生成输入标记的PHP函数：我正在函数中定义一个数组，该数组最终将保留要显示为value的数据和随机生成的字符-> $ran的key 。

function constInputTag($ran){
    $inputTitle = $_POST['inputTitle'];
    $attrTypeSubmit = $_POST['attrTypeSubmit'];          
    $output = [];
    $output[1] = $ran;    
    $output[0] = '
    <div id="'.$output[1].'" class="input-type">
        <label>'.$inputTitle.'</label>
        &lt;input type="'.$_POST['inputType'].'"';
    if(isset($attrTypeSubmit)){        
        foreach($_POST as $name => $value){
            //set post keys not included in the input tag in $omit to exclude them from input tag
            $omit = array('inputTitle', 'inputType', 'attrTypeSubmit');
            if(!in_array($name, $omit)) {
                $output[0] .= ' '.$name.'="'.$value.'"';
            }else{
                unset($name);                
            }           
        }
    }
    $output[0] .= '&gt;<input type="button" alt="'.$output[1].'" id="deleteInput" class="deleteInput" value="Delete this field"> <span id="deleteMSG"></span>
    </div>
    ';   
    return $output;
}

输出： 此代码在条件内，该条件检查是否已提交表单，然后根据设置的提交帖子来连接输出变量和SESSION数组。

$ran = create_random_char(10);
$output .= constInputTag($ran)[0];
if(isset($_SESSION['form']['content'])){    
    $_SESSION['form']['content'][constInputTag($ran)[1]] = constInputTag($ran)[0]; 
}
//--> $_SESSION['form']['content']['key from function'] = 'value from function';

The Javascript： 前端代码，用于检查是否单击了删除按钮，创建是/否按钮，向这些按钮添加属性并显示它们，找到并设置将用作标识符的随机字符父div，按钮和会话，将删除保存动态创建的元素的父div

NEED： 保存相应用户输入的SESSION键/值的删除。

var getInputId = document.getElementById("deleteInput"); // get the delete button and define it
if(document.getElementById("deleteInput")){ // if the element is in the DOM
    getInputId.addEventListener('click', function() { // set an event listener for click for the delete input button
        const delMsg = document.getElementById("deleteMSG"); // get the delete message span by id
        delMsg.innerHTML = '<span class="warning">Delete this input?</span>'; // set message and css to make sure user wishes to delete this input
        const yes = document.createElement('input'); // create the yes button input element
        const no = document.createElement('input'); // create the no button input element                          
        yes.type = 'button'; // add attributes to the yes button
        yes.id = 'deleteTrue';
        yes.value = 'Yes';
        no.type = 'button'; // add attributes to the no button
        no.id = 'deleteFalse';
        no.value = 'No';
        delMsg.appendChild(yes); // append the buttons to the span tag asking if user wants to delete
        delMsg.appendChild(no);

        // click event that searches for the randomly generated character in order to delete the input from the DOM
        yes.addEventListener('click', function() {  
            // Sets the ID for the parent div to the inputs ALT tags 
            // value which is set in php to the randomly generated character
            let searchId = getInputId.alt; 
            deleteId = document.getElementById(searchId); // search for the ID set to the random character 
            deleteId.remove(); // remove the tag, which is the div with ID set to random character
            sessionStorage.removeItem(searchId); // here is my attempt to remove session value
            console.log(searchId); // log console to compare values from inspector in browser

        });
        no.addEventListener('click', function() { // resets delMsg span and children
            delMsg.innerHTML= '';
        });
    });
}

这似乎是代码无法正常工作：sessionStorage.removeItem(searchId);

再次，searchid保留在父div中设置的随机生成的值，该值用于删除用户输入的输入字段，它也被设置为$_SESSION['form']['content']数组中的键值；

此代码在DOM中正常工作，并从页面中删除输入。现在，我只需要弄清楚如何为$_SESSION数组中的相应输入设置关联数组值。我不反对使用AJAX，但是，特别是JS和AJAX对我而言不是强项，我需要从提交的所有答案中了解其工作方式。

谢谢你！非常感谢所有帮助！！

Answer 1

我正在使用AJAX调用来解决此问题。