插入的项目需要是可点击的，但他们不会删除答案

【问题标题】：Inserted items need to be clickable but they dont delete插入的项目需要是可点击的，但他们不会删除
【发布时间】：2019-09-24 18:55:42
【问题描述】：

我有一个带有会话的表单，一旦我插入一个项目，它就会进入列表。但现在我需要确保这些项目是可点击的，一旦你点击它，项目就会消失。

<!doctype html>
<html>
<head>
    <title>Opdracht 5</title>
    <style>

    </style>
</head>
<body>
<form action="" method="post">
    <input type="text" name="boodschap"><br><br>
    <input type="submit" name="submit" value="Verstuur">
</form>
<?php session_start(); ?>
<ul>
    <?php
    if (!empty($_POST['submit'])) {

        $_SESSION['boodschappen'][] = $_POST['boodschap'];

        foreach ($_SESSION['boodschappen'] as $boodschap) {
            echo "<li>".$boodschap."</li>";
        }
    } else {
        $_SESSION['boodschappen'] = [];
    }
    ?>
</ul>
</body>
</html>

【问题讨论】：

请阅读How to Ask。我们希望您在这里提出具体问题，描述您面临的问题 - 而不是只是向我们提供规范/要求。
你指的是list 项目 - 它们只能点击一次吗？
你的意思是一些淡出效果？并同时在会话中删除它？你需要一些 js 来将它与 xmlhttprequest 混合。如果你想让它保持简单，你需要为每个列表项点击再次提交表单
或在每个项目的左侧添加一个复选框，然后提交并使用复选框处理表单并将其从会话中删除
用 Ajax 是可行的

标签： php html forms session

【解决方案1】：

一个小解决方法是：

<form action="" method="post">
    <input type="hidden" name="remove" value="0">
    <input type="text" name="boodschap"><br><br>
    <input type="submit" name="submit" value="Verstuur">
</form>

<script>

function remove(item) {

    document.getElementsByName('remove')[0].value = 'true';

    document.getElementsByName('boodschap')[0].value = item;

    document.getElementsByName('submit')[0].click();

}

</script>

还有 PHP 部分：

<?php

    if (!empty($_POST['submit'])) {


        if($_POST['remove']) {

            // Search array
            $pos = array_search($_POST['boodschap'], $_SESSION['boodschappen']);

            // Remove from array
            unset($_SESSION['boodschappen'][$pos]);

        } else {

            // Else set as new item
            $_SESSION['boodschappen'][] = $_POST['boodschap'];

        }

        foreach ($_SESSION['boodschappen'] as $boodschap) {
            echo "<li onclick=\"remove('".$boodschap."');\" >".$boodschap."</li>";
        }

    } else {
        $_SESSION['boodschappen'] = [];
    }

?>

【讨论】：

这件作品完全符合我的需要，一件小事可以让物品像图片中一样变成蓝色
在head之后添加这个标签<style> li{color: #3af;text-decoration:underline;} </style>
我需要把它变成一个链接，而不仅仅是颜色

【解决方案2】：

要在每次单击链接时不不断地重新加载页面的情况下执行此操作，您需要使用XMLHttpRequest 或Fetch ~ 即：Ajax。也许以下内容会被证明是有用的。

<?php
    /* 
        start the session - do NOT call this within the 
        body of the HTML unless you are using output 
        buffering 
    */
    session_start();

    $svar='boodschappen';
    $field='boodschap';


    /* initialise the empty session variable */
    if( !isset( $_SESSION[ $svar ] ) ){
        $_SESSION[ $svar ]=array();
    }


    /* Process form submissions, add new items to array */
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST[ $field ] ) ){

        /* allow a single item or a space separated series of items */
        $items=array_unique( explode( ' ', $_POST[ $field ] ) );

        /* add new item to session if it does not already exist in the array */
        foreach( $items as $item ){
            if( !in_array( $item, $_SESSION[ $svar ] ) ) $_SESSION[ $svar ][]=$item;
        }
    }


    /* process ajax POST requests to remove item from session */
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['item'] ) ){
        ob_clean();

        /* if the item exists in the array, find it's position and remove it */
        if( $_POST['action']=='delete' && in_array( trim( $_POST['item'] ), $_SESSION[ $svar ] ) ){

            $pos=array_search( trim( $_POST['item'] ), $_SESSION[ $svar ] );
            array_splice( $_SESSION[ $svar ], $pos );
        }

        /* send item name back to javascript callback which will remove it from the list */
        exit( trim( $_POST['item'] ) );
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Opdracht 5</title>
        <style>
            body *{display:block}
            li,a{color:blue}
            input{padding:0.5rem;}
            [type='text']{clear:both;}
            [type='submit']{margin:1rem 0 0 0;}
        </style>
        <script>

            document.addEventListener('DOMContentLoaded',()=>{
                const ingredients=document.getElementById('ingredients');

                const ajax=function( data, callback ){
                    let xhr=new XMLHttpRequest();
                    xhr.onload=function(){
                        if( this.status==200 && this.readyState==4 )callback( this.response )
                    };
                    xhr.open( 'POST', location.href, true );
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    xhr.send( data );
                };

                const callback=function(r){
                    ingredients.removeChild( ingredients.querySelector('li[ title="'+r+'" ]') );
                    if( ingredients.childElementCount==0 )console.info('List cleared');
                };

                ingredients.addEventListener('click',function(e){
                    /* use `event delegation` to register clicks to child elements */
                    if( e.target != e.currentTarget && e.target.tagName=='A' ){
                        ajax( 'action=delete&item='+e.target.innerText, callback );
                    }
                });
            });
        </script>
    </head>
    <body>
        <form method='post'>
            <input type='text' name='boodschap' />
            <input type='submit' />
        </form>
        <ul id='ingredients'>
            <?php
                if( !empty( $_SESSION[ $svar ] ) ){
                    foreach( $_SESSION[ $svar ] as $boodschap ) {
                        printf('
                        <li title="%1$s"><a href="#">%1$s</a></li>', $boodschap );
                    }
                }
            ?>
        </ul>
    </body>
</html>

【讨论】：