代码之家 › 专栏 › 技术社区 › flash

如何在JavaScript中删除点击按钮的行?

json php javascript

flash · 技术社区 · 5 年前

我有一个如下所示。下面的 html/php格式 代码的工作方式是,在添加行时,我们可以从每一行中选择日期,也可以保存它。

需要做两件事。

单击时删除按钮,它应该从 JSON文件 保存表单后。
另外,单击删除

0 回复 | 直到 5 年前

Valometrics.com 5 年前

您应该为每个添加的行指定一个与其等级对应的id:

row.id=i.toString();

然后使用以下代码删除该行:

var row = document.getElementById(rowrankid);
row.parentNode.removeChild(row);

rattybag 5 年前

我已经为您准备了一个代码示例,使用的示例完全符合您的要求。

它使用javascript fetch post请求发布到您提供的脚本中,以删除dom元素并更新json文件。

我已经稍微更改了您的一些路径,因此您需要将这些路径更改回来(添加到../feeds/parent目录中)

一旦用户按下按钮,页面将重新加载,显示从json文件加载的更新界面。

可以做一些改进,例如javascript在重新加载之前没有检查以确保请求成功,但是由于输入是date select,所以应该可以。

<?php

if(file_exists('./ptp-ess_landing_house.json')){
    $data = json_decode(file_get_contents('./ptp-ess_landing_house.json'));
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $_POST = json_decode(file_get_contents('php://input'), true);

    if(isset($_POST['requestType']) && in_array($_POST['requestType'], ['remove'])) {

        switch ($_POST['requestType']) {
            case 'remove' :
                    //Unset the values
                    unset($data->row_delete[$_POST['data'] -1]);
                    unset($data->house_sitting_date[$_POST['data'] -1]);

                    //We are reindexing the arrays as we have deleted some rows, note that we are using +1 array indexes
                    $data->row_delete = array_values($data->row_delete);
                    $data->house_sitting_date = array_values($data->house_sitting_date);

                    foreach($data->row_delete as $key=>$value) {
                        $data->row_delete[$key] = strval($key+1);
                    }

                    //Write the file back
                    $fp = fopen('./ptp-ess_landing_house.json', 'w');
                    fwrite($fp, json_encode($data));
                    fclose($fp);

                    header("HTTP/1.1 200 OK");
                    echo 'ok';
                    die;

                break;

            default:
        }

    }
}
?>
<script>
    function rowDelete(row) {
        //Make a request to your entry file (index.php here) to do the removal
        fetch('/index.php', {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({requestType: 'remove', data: row})
        }).then(function(response) {
            location.reload();
            return response;
        });
    }
</script>
<?php if($data) { ?>
    <form method="post">
        <div id="rows" style="display:flex; justify-content: center;"><!-- Big div START -->

            <!-- Remove Button START -->
            <div class="rows-delete">
                <h4 style="text-align:center;">Delete Rows</h4>
                <?php if (empty($data->row_delete)) { ?>
                    <div class="row-delete" style="margin-right:30px; margin-top:22.5px;">
                        <button type="button" id="delete" onclick="rowDelete()">Remove</button>
                        <input type="hidden" name="row_delete[]" value="1" />
                    </div>
                <?php } else {  ?>
                    <?php  foreach ($data->row_delete as $row_delete){ ?>
                        <div class="row-delete" style="margin-right:30px; margin-top:22.5px;">
                            <button id="delete" type="button"  onclick="rowDelete(<?php echo $row_delete;?>)">Remove</button>
                            <input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />
                        </div>
                    <?php }} ?>
            </div>
            <!-- Remove Button END -->

            <!-- Sitting Date START -->
            <div class="sitting-days">
                <h4 style="text-align:center;">Select Date</h4>
                <?php if (empty($data->house_sitting_date)) { ?>
                    <!-- Select Date START -->
                    <div class="select-date" style="margin-right:30px; margin-top:20px;">
                        <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
                    </div>
                <?php } else {  ?>
                    <?php  foreach ($data->house_sitting_date as $date){ ?>
                        <!-- Select Date START -->
                        <div class="select-date" style="margin-right:30px; margin-top:20px;">
                            <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
                        </div>
                        <!-- Select Date END -->
                    <?php }} ?>
            </div>
            <!-- Sitting Date END -->

        </div><!-- Big div END -->
    </form>
<?php } else {
    echo 'Cannot read JSON settings file';
}
?>

Bart Barnard 5 年前

rowDelete 是JS函数),可以通过 this 行删除 this.parentNode.childNodes[1] ).

一旦获得该值,就可以轻松地将其从json中相应的数组中移除:

let d = '2020-01-30'
let idx = arr.indexOf(d)   
let newdates = ([...arr.slice(0,idx), ...arr.slice(idx+1)])
data.house_sitting_date = newdates

(当然,还有一些额外的索引边界检查)。

之后,可以执行类似的DOM遍历,从DOM中移除相应的元素。

-1

T.Todua Laurent W. 5 年前

<?php
for ($i=0; $i<count($data["house_sitting_date"]); $i++)
{
     echo '<div class="remove"><a id="'.$data["row_delete"][$i].'" onclick="deleteRow(this);">Remove</a></div>';
     echo '<div class="date">....</div>';
     ...
}
?>
<script> function deleteRow(el) { el.remove(); } </script>

还有,很多嵌入式的 style=""

-1

Gursharn Singh 5 年前

我以前就是这样做的,而且效果很好

这个答案工作的先决条件是每个按钮和输入字段都应该在具有唯一id的DIV中,并且在我的例子中应该有所有这些DIV的容器

    // Create a clone of element with id ddl_1:
    let clone = document.querySelector('#row'+rownumber).cloneNode( true );
    // Append the newly created element on element p 
    document.querySelector('p').appendChild( clone );

然后,每次添加新行或删除行时,都需要在这些行上附加id,为此,在我使用的例子中,所有这些行都需要一个公共类rows

    function changeids()
    {
     let rows =document.getElementsByClassName('rows');

     for(let i=0; i<rows.length; i++)
     {
       let thisid="row"+i;
       rows[i].setAttribute("id", thisid);

       let thisAddButton = rows[i].getElementsByClassName("add")[0];
       let thisDeleteButton = rows[i].getElementsByClassName("delete")[0];

       let onclickaddfunction = "addrow("+i+")";
       thisAddButton.setAttribute("onclick", onclickaddfunction);

       let onclickDeletefunction = "removerow("+i+")";
       thisDeleteButton.setAttribute("onclick", onclickDeletefunction);

     }
}

function removerow(rownumber){

document.getElementById('row'+rownumber).remove();
changeids();
}

这将给你整个工作思路的添加和删除行,整个代码下面请忽略我凌乱的代码,只是这样做给你和想法

<p>

  <div id="row1" class="rows">
   <button class="add" onclick="addrow(1)">add</button>
   <button class="delete" onclick="removerow(1)"> remove </button>
   <input type="text">
  </div>
</p>


<script>
function addrow(rownumber)
{
  // Create a clone of element with id ddl_1:
  let clone = document.querySelector('#row'+rownumber).cloneNode( true );

 // Append the newly created element on element p 
 document.querySelector('p').appendChild( clone );

 changeids();

}

function removerow(rownumber)
{
   document.getElementById('row'+rownumber).remove();
   changeids();
}

function changeids()
{
  let rows =document.getElementsByClassName('rows')

  for(let i=0; i<rows.length; i++)
  {
   let thisid="row"+i;
   rows[i].setAttribute("id", thisid);

   let thisAddButton = rows[i].getElementsByClassName("add")[0];
   let thisDeleteButton = rows[i].getElementsByClassName("delete")[0];

   let onclickaddfunction = "addrow("+i+")";
   thisAddButton.setAttribute("onclick", onclickaddfunction);

   let onclickDeletefunction = "removerow("+i+")";
   thisDeleteButton.setAttribute("onclick", onclickDeletefunction);

  }
}
</script>

-2

Pradeep Darjee 5 年前

若要从dom中删除行,必须为行的主元素指定唯一的id,并且可以使用[ElementObject].remove()方法删除,这样将删除其中的所有内容。您还应该简化和更改JSON数据,以便它也可以使用ajax从JSON中删除,并使用单个id(key)作为参数。

以下是工作代码:

<?php

        if (!empty($_GET)) {
            if (!empty($_GET['action']) && $_GET['action'] == 'delete') {
                if(file_exists('ptp-ess_landing_house.json')) {
                    $data = json_decode(file_get_contents('ptp-ess_landing_house.json'), true);
                    if (!empty($_GET['row_number'])) {
                        unset($data[$_GET['row_number']]);

                        $fp = fopen('ptp-ess_landing_house.json', 'w');
                        fwrite($fp, json_encode($data));
                        fclose($fp);

                        echo 1;
                        exit;
                    }
                }

                echo 0;
                exit;
            }
        }

        if (!empty($_POST)) {
            $output = array();     

            if (!empty($_POST['row_item'])) {
                $output = $_POST['row_item'];
            }

            $fp = fopen('ptp-ess_landing_house.json', 'w');
            fwrite($fp, json_encode($output));
            fclose($fp);
        }

        $data = array();
        if(file_exists('ptp-ess_landing_house.json')) {
            $data = json_decode(file_get_contents('ptp-ess_landing_house.json'), true);
        }

        ?><form method="post">
            <!-- Add New Row Button START -->
            <div class="plus-minus-button" style="text-align:center;">    
                <button type="button" id="addRow" onclick="rowAdd()">+</button>
            </div>

            <!-- Add New Row Button END -->
            <div id="maindiv">
                <div style="display:flex; justify-content: center;">
                    <div class="rows-delete" style="text-align:center;">
                        <div class="row-delete" style="margin-right:30px;">
                            <h4 style="text-align:center;">Delete Rows</h4>
                        </div>
                    </div>
                    <div class="sitting-days" style="text-align:center;">
                        <div class="select-date" style="margin-right:30px;">
                            <h4 style="text-align:center;">Select Date</h4>
                        </div>
                    </div>
                    <div class="choose-options" style="text-align:center;">
                        <div class="yes-no-option" style="display:inline-grid;">
                            <h4 style="text-align:center;">Yes/No</h4>
                        </div>
                    </div>
                </div>

                <!-- Big div START --><?php

                $totalrow = 0;
                foreach ($data AS $key => $row) {
                    ?><div id="row-<?php echo $key; ?>" style="display:flex; justify-content: center; margin-top:20px;"><?php

                        ?><div class="rows-delete" style="text-align:center;">
                            <div class="row-delete" style="margin-right:30px;">
                                <button type="button" class="delete" onClick="delete_row(this.value)" value="<?php echo $key; ?>">Remove</button>
                                <input type="hidden" name="row_item[<?php echo $key; ?>][row_delete]" value="<?php echo $row['row_delete'];?>" />
                            </div>
                        </div>  

                        <!-- Remove Button END -->
                        <!-- This is what I have tried to add a button (END) -->    

                        <!-- Sitting Date START -->
                        <div class="sitting-days" style="text-align:center;">
                            <div class="select-date" style="margin-right:30px;">
                                <input type="date" class="house-sitting-date" name="row_item[<?php echo $key; ?>][house_sitting_date]" value="<?php echo $row['house_sitting_date']; ?>">
                            </div>
                        </div>  
                        <!-- Sitting Date END -->

                        <!-- YES/NO START --><?php
                        ?><div class="choose-options">
                            <div class="yes-no-option" style="display:inline-grid;">
                                <select name="row_item[<?php echo $key; ?>][house_sitting_date_yes_no]" class="house-yes-no" style="height:24px; ">
                                   <option value="<?php echo $row['house_sitting_date_yes_no']; ?>" <?php if($row['house_sitting_date_yes_no'] == "nada" ) echo "selected";?>>Please choose an option</option>
                                   <option value="<?php echo $row['house_sitting_date_yes_no']; ?>" <?php if($row['house_sitting_date_yes_no'] == "yes" ) echo "selected";?>>Yes</option>
                                   <option value="<?php echo $row['house_sitting_date_yes_no']; ?>" <?php if($row['house_sitting_date_yes_no'] == "no" ) echo "selected";?>>No</option>
                                </select>
                            </div>
                        </div>
                        <!-- YES/NO END -->
                    </div><?php

                    if ($key > $totalrow) $totalrow = $key;
                    else $totalrow++;
                }
            ?>
            <input type="hidden" name="totalrow" id="totalrow" value="<?php echo $totalrow; ?>">
            </div>
            <!-- Big div END -->

            <hr />
            <div style="text-align:center;">
                <input type="submit" value="submit" />
            </div>

        </form>

        <script>
            function delete_row(row_number) {
                var data = '<?php echo json_encode($data) ?>';
                data = JSON.parse(data);
                if (typeof(data[row_number]) != undefined) {
                    var request = new XMLHttpRequest();
                    request.open("GET", "index.php?action=delete&row_number=" + row_number);
                    request.onreadystatechange = function() {
                        if (this.readyState === 4 && this.status === 200) {
                            var row = document.getElementById('row-'+row_number);
                            row.remove();
                        }
                    }
                    request.send();
                }
                else {
                    var row = document.getElementById('row-'+row_number);
                    row.remove();
                }
            }
            function rowAdd(event) {    
                var totalrow = document.getElementById("totalrow").value;
                totalrow = parseInt(totalrow) + 1;

                document.getElementById("maindiv").insertAdjacentHTML('beforeend', newRow(totalrow));

                document.getElementById("totalrow").value = totalrow;
            }
            function newRow(row_number) {
                return `<div id="row-` + row_number + `" class="sitting-days" style="display:flex; justify-content:center; margin-top:20px;">
                    <div class="rows-delete" style="text-align:center;">
                        <div class="row-delete" style="margin-right:30px;">
                            <button type="button"  class="delete" onClick="delete_row(this.value)" value="` + row_number + `">Remove</button>
                            <input type="hidden" name="row_item[` + row_number + `][row_delete]" value="` + row_number + `" />
                        </div>
                    </div>
                    <div class="sitting-days" style="text-align:center;">
                        <div class="select-date" style="margin-right:30px;">
                            <input type="date" class="house-sitting-date" name="row_item[` + row_number + `][house_sitting_date]" value="">
                        </div>
                    </div>
                    <div class="choose-options">
                        <div class="yes-no-option" style="display:inline-grid;">
                            <select name="row_item[` + row_number + `][house_sitting_date_yes_no]" class="house-yes-no" style="height:24px; ">
                               <option value="nada">Please choose an option</option>
                               <option value="yes">Yes</option>
                               <option value="no">No</option>
                            </select>
                        </div>
                    </div>
                </div>`;
            }


    </script>