Php 如何通过javascript弹出div close按钮工作和删除div

我是来找你帮忙的

1） 我已经通过javascript在HTML页面中添加了一个弹出div。这是你的电话号码。如果您单击编辑图标（在网页的右侧和中心），将出现一个弹出框。如果单击该弹出框的外部，它将关闭。我在弹出窗口中放置了一个关闭图标。我想当任何人点击关闭图标时，弹出框也会关闭。我也为它放了一个javascript。但是，当我单击关闭图标时，弹出框将关闭，但除非单击窗口的任何一侧，否则透明背景（div class=“dimmer”）仍将保留。我怎样才能解决这个问题

2） 您可以看到作业详细信息列表有两个部分。还有一个删除图标。我希望当我单击删除图标时，删除图标旁边的div将被删除。如何通过javascript实现这一点

必要的HTML代码：

<div class="wrapper">
        <header class="page_title">
            <h1>All Jobs</h1>
        </header>
        <article class="information">
            <table class="table">
                <thead>
                    <tr>
                        <th>Job ID</th>
                        <th>Start Date</th>
                        <th>Deadline</th>
                        <th>Finish Date</th>
                        <th>Budget($)</th>
                        <th>Client ID</th>
                        <th>Bidder ID</th>
                        <th>Number of Supervisor</th>
                        <th>Name of Supervisor</th>
                        <th>Odesk Profile ID</th>
                        <th>Owner Type</th>
                        <th class="icon">

                            <a href="#"><img src="images/edit-icon.jpg" width="41" height="39" alt="Edit" title="Edit Job" class="icon_first" id="opener" /></a>
                            <a href="#"><img src="images/delete.png" width="41" height="39" alt="Delete" title="Delete Job" /></a>

                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>06/05/2013</td>
                        <td>11/05/2013</td>
                        <td>10/05/2013</td>
                        <td>100</td>
                        <td>John_01</td>
                        <td>abid</td>
                        <td>2</td>
                        <td>
                            1. Dolar
                            2. Soshi
                        </td>
                        <td>
                            <a href="#">See the job at Odesk</a>                                    
                        </td>
                        <td>Member</td>
                    </tr>
                </tbody>
            </table>
            <div id="lightbox">
                <section id="form">
                    <header class="titlebar">
                        <a href="#"><img src="images/close-icon.png" width="33" height="32" alt="close" title="Close" id="closer" class="close" /></a>
                        <h1>Edit Form</h1>

                    </header>
                    <form id="form" name="form" method="post" action="#">
                        <label>Job ID:</label>
                        <input type="text" name="job_id" id="job_id" placeholder="1" />
                        <label>Start Date:</label>
                        <input type="date" name="start_date" id="start_date" placeholder="mm/dd/yy">
                        <label>Deadline:</label>
                        <input type="date" name="deadline" id="deadline">
                        <label>Finish Date:</label>
                        <input type="date" name="finish_date" id="finish_date">
                        <label>Budget($):</label>
                        <input type="number" name="Budget" id="Budget" placeholder="100">
                        <label>Client ID:</label>
                        <input type="text" name="client_id" id="client_id" placeholder="1" />
                        <label>Bidder ID:</label>
                        <input type="text" name="bidder_id" id="bidder_id" placeholder="1" />
                        <label>Number of Supervisor:</label>
                        <select title="Supervisor">
                            <option>1</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                        </select>
                        <label>Odesk Profile ID:</label>
                        <input type="text" name="odesk_id" id="odesk_id" placeholder="https://www.odesk.com/jobs/Frontend-engineer">
                        <label>Owner Type:</label>
                        <input type="radio" name="owner_type" id="owner_type" value="member" /><label class="text_label">Member</label>
                        <input type="radio" name="owner_type" id="owner_type" value="employee" /><label class="text_label">Employee</label>
                        <div class="clear"></div>
                        <input type="submit" name="submit" id="submit" value="Submit">
                    </form>
                </section>
            </div>
        </article>
        <article class="information">
            <table class="table">
                <thead>
                    <tr>
                        <th>Job ID</th>
                        <th>Start Date</th>
                        <th>Deadline</th>
                        <th>Finish Date</th>
                        <th>Budget($)</th>
                        <th>Client ID</th>
                        <th>Bidder ID</th>
                        <th>Number of Supervisor</th>
                        <th>Name of Supervisor</th>
                        <th>Odesk Profile ID</th>
                        <th>Owner Type</th>
                        <th class="icon">

                            <a href="#"><img src="images/edit-icon.jpg" width="41" height="39" alt="Edit" title="Edit Job" class="icon_first" /></a>
                            <a href="#"><img src="images/delete.png" width="41" height="39" alt="Delete" title="Delete Job" /></a>

                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>06/05/2013</td>
                        <td>11/05/2013</td>
                        <td>10/05/2013</td>
                        <td>100</td>
                        <td>John_01</td>
                        <td>abid</td>
                        <td>2</td>
                        <td>
                            1. Dolar

                        </td>
                        <td>
                            <a href="#">See the job at Odesk</a>                                    
                        </td>
                        <td>Member</td>
                    </tr>
                </tbody>
            </table>
        </article>
    </div>

Javascript代码：

var opener = document.getElementById("opener");
var lightbox = document.getElementById("lightbox");


opener.onclick = function(){

    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");

    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';

    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }

    document.body.appendChild(dimmer);

    lightbox.style.visibility = 'visible';

    return false;
}


var closer = document.getElementById("closer");
closer.onclick = function closepopup()
{
  lightbox.style.visibility = 'hidden';

}

---

您可以在主体中动态添加黑色div。当你点击代码时，它会被删除，但当你点击“关闭”时，你不会删除它

在“关闭”按钮上添加此选项，单击：

document.body.removeChild(document.getElementsByClassName('dimmer')[0]);

2） 对于删除内容，您需要添加以下代码：

var deleteBtn = document.getElementsByClassName('yourClass');
for(var i = 0; i < deleteBtn.length; i++) {
    var btn = deleteBtn[i];
    btn.onclick = function() {
        for (var k=0; k < deleteBtn.length; k++){
            if(this == deleteBtn[k]){
                break;
            }
        }


        var wrapper = document.getElementsByClassName('wrapper')[0];
        var target = wrapper.getElementsByTagName('article');
        wrapper.removeChild(target[k])

        deleteBtn = document.getElementsByClassName('yourClass');
    }
}

var deleteBtn=document.getElementsByClassName（'yourClass'）；
对于（变量i=0；i

---

它将搜索单击按钮的索引并删除相应的文章。

1）谢谢！它起作用了！2） 对于删除div，您可能不了解我的情况。我并不是想通过单击popup div上的close图标来删除popup div。我想在任何人单击编辑图标旁边的delete图标（而不是popup div上的close图标）时完全删除/删除该div（..）。但是，不幸的是，2）仍然无法工作：（好的，我检查了您的代码，这里是错误的地方。1）您的btn删除器应该是一个id，但是一个类（id表示唯一元素）。2） 代码不应位于单击功能中。你通过你的btn循环，并在循环中设置为偶数。3） “yourClass”应该是你的btn的类，而不是你的文章。如果你做了这三件事，它应该能工作。我又更新了一次，但仍然不能工作。请你最后一次写下确切的密码好吗？感谢againOk，代码正在运行（我测试了它），剩下的唯一更改是将类“delete”添加到包含“x”图像的

中。

var deleteBtn = document.getElementsByClassName('yourClass');
for(var i = 0; i < deleteBtn.length; i++) {
    var btn = deleteBtn[i];
    btn.onclick = function() {
        for (var k=0; k < deleteBtn.length; k++){
            if(this == deleteBtn[k]){
                break;
            }
        }


        var wrapper = document.getElementsByClassName('wrapper')[0];
        var target = wrapper.getElementsByTagName('article');
        wrapper.removeChild(target[k])

        deleteBtn = document.getElementsByClassName('yourClass');
    }
}