使用纯javascript删除span单击时的父元素和子元素_Javascript_Jquery

使用纯javascript删除span单击时的父元素和子元素

javascript jquery

使用纯javascript删除span单击时的父元素和子元素,javascript,jquery,Javascript,Jquery,我正在用PlanJavaScript替换一段jQuery。我已经设法替换了其中的一些元素，但是我正在努力使用一个动态添加的元素，它应该有某种点击处理程序来删除它的父元素和父元素第一段PHP代码检索存储的数据并显示它 if(count( $coordinates ) > 0 ) { if(!empty($coordinates)){ foreach( $coordinates as $coords ) { foreach( $coo

我正在用PlanJavaScript替换一段jQuery。我已经设法替换了其中的一些元素，但是我正在努力使用一个动态添加的元素，它应该有某种点击处理程序来删除它的父元素和父元素

第一段PHP代码检索存储的数据并显示它

if(count( $coordinates ) > 0 ) {
     if(!empty($coordinates)){
          foreach( $coordinates as $coords ) {
              foreach( $coords as $coord ) {
                printf( 
                 '<p>
                    Coordinate: <input type="text" name="coordinatesId[%1$s][title]" value="%2$s" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[%1$s][coord]" value="%3$s" /
                    <span id="spanRmv" class="remove">%4$s</span>
                 </p>', 
                $c, 
                $coord['title'],   
                $coord['coord'], 
                __( ' Remove' ) );
                
                $c++;
             }
         }
     }
 }

 <span id="here"></span>

 <span id="spanBtn">
    <?php _e('Add new field'); ?>
 </span>

这解决了以下错误“Uncaught TypeError:单击时无法读取未定义的属性“parentNode”

有谁能建议我如何处理此onclick事件以删除此动态内容的父项和子项吗？

ID必须是唯一的
```
p
```
不是跨度的有效子级。你应该用div
出于可访问性的原因使用按钮

window.addEventListener（'load'，function（）{
const here=document.getElementById（'here'）；
here.addEventListener（'click'，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（'remove'））{
tgt.closest（'p'）.remove（）；
}
});
document.getElementById（'btn'）。addEventListener（'click'，function（）{
const count=here.queryselectoral（'p'）.length；
here.innerHTML+=`坐标：
纬度和经度：
删除`；
});
});
添加新字段

ID必须是唯一的
p
不是跨度的有效子级。你应该用div
出于可访问性的原因使用按钮


window.addEventListener（'load'，function（）{
const here=document.getElementById（'here'）；
here.addEventListener（'click'，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（'remove'））{
tgt.closest（'p'）.remove（）；
}
});
document.getElementById（'btn'）。addEventListener（'click'，function（）{
const count=here.queryselectoral（'p'）.length；
here.innerHTML+=`坐标：
纬度和经度：
删除`；
});
});
添加新字段
谢谢你，姆普隆詹。你的回答帮我找到了正确的方向
下面是我最后使用的代码，这两个代码都使我能够在应用元素后删除元素，并且在单击尚未保存的元素的“删除”时删除元素
if(count( $coordinates ) > 0 ) {
   if(!empty($coordinates)){
       foreach( $coordinates as $coords ) {
          foreach( $coords as $coord ) {
            printf( 
                '<div>
                    Coordinate: <input type="text" name="coordinatesId[%1$s][title]" value="%2$s" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[%1$s][coord]" value="%3$s" />
                        <button type="button" class="remove">%4$s</button></p>
                    </div>', 
                    $c, 
                    $coord['title'],   
                    $coord['coord'], 
                    __( ' Remove' ) );
                $c++;
            }
        }
    }    
}

?>
    
<span id="here"></span>

<button type="button" id="btn">Add new field</button>

if（计数（$coordinates）>0）{
如果（！空（$coordinates））{
foreach（$coords作为$coords的坐标）{
foreach（$coords作为$coord）{
printf（
'
协调：
纬度和经度：
%4美元
', 
$c，
$coord['title']，
$coord['coord']，
__（“删除”）；
$c++；
}
}
}    
}
?>
添加新字段

以下是取代jQuery的Javascript
<script>
        document.addEventListener('DOMContentLoaded', function() {
            
            console.log('DOM is ready!');

            const btn = document.getElementsByClassName('remove')

            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener('click', function(e) {
                    
                    console.log("Removing existing field!");

                    e.currentTarget.parentNode.remove();

                }, false);
            }
        });

        window.addEventListener('load', function() {
            
            const here = document.getElementById('here'); 

            here.addEventListener('click', function(e) {
                const tgt = e.target;
                
                if (tgt.classList.contains('remove')) {
                    console.log("Removing existing field!");
                    
                    tgt.closest('div').remove();
                }

            });

            var count = <?php echo $c; ?>;

            document.getElementById('btn').addEventListener('click', function() {

                count = count + 1;

                console.log("Adding additional field number " + count + "!");

                here.innerHTML += `<div>Coordinate: <input type="text" name="coordinatesId[${count}][title]" value="" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[${count}][coord]" value="" />
                    <button type="button" class="remove"> Remove</button></div>`;
            });
        });
    </script>


document.addEventListener（'DOMContentLoaded'，function（）{
log（'DOM已准备就绪！'）；
const btn=document.getElementsByClassName（'remove'）
对于（变量i=0；i

谢谢
 谢谢你，mplungjan。你的回答帮我找到了正确的方向
下面是我最后使用的代码，这两个代码都使我能够在应用元素后删除元素，并且在单击尚未保存的元素的“删除”时删除元素
if(count( $coordinates ) > 0 ) {
   if(!empty($coordinates)){
       foreach( $coordinates as $coords ) {
          foreach( $coords as $coord ) {
            printf( 
                '<div>
                    Coordinate: <input type="text" name="coordinatesId[%1$s][title]" value="%2$s" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[%1$s][coord]" value="%3$s" />
                        <button type="button" class="remove">%4$s</button></p>
                    </div>', 
                    $c, 
                    $coord['title'],   
                    $coord['coord'], 
                    __( ' Remove' ) );
                $c++;
            }
        }
    }    
}

?>
    
<span id="here"></span>

<button type="button" id="btn">Add new field</button>

if（计数（$coordinates）>0）{
如果（！空（$coordinates））{
foreach（$coords作为$coords的坐标）{
foreach（$coords作为$coord）{
printf（
'
协调：
纬度和经度：
%4美元
', 
$c，
$coord['title']，
$coord['coord']，
__（“删除”）；
$c++；
}
}
}    
}
?>
添加新字段

以下是取代jQuery的Javascript
<script>
        document.addEventListener('DOMContentLoaded', function() {
            
            console.log('DOM is ready!');

            const btn = document.getElementsByClassName('remove')

            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener('click', function(e) {
                    
                    console.log("Removing existing field!");

                    e.currentTarget.parentNode.remove();

                }, false);
            }
        });

        window.addEventListener('load', function() {
            
            const here = document.getElementById('here'); 

            here.addEventListener('click', function(e) {
                const tgt = e.target;
                
                if (tgt.classList.contains('remove')) {
                    console.log("Removing existing field!");
                    
                    tgt.closest('div').remove();
                }

            });

            var count = <?php echo $c; ?>;

            document.getElementById('btn').addEventListener('click', function() {

                count = count + 1;

                console.log("Adding additional field number " + count + "!");

                here.innerHTML += `<div>Coordinate: <input type="text" name="coordinatesId[${count}][title]" value="" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[${count}][coord]" value="" />
                    <button type="button" class="remove"> Remove</button></div>`;
            });
        });
    </script>


document.addEventListener（'DOMContentLoaded'，function（）{
log（'DOM已准备就绪！'）；
const btn=document.getElementsByClassName（'remove'）
对于（变量i=0；i<script>
        document.addEventListener('DOMContentLoaded', function() {
            
            console.log('DOM is ready!');

            const btn = document.getElementsByClassName('remove')

            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener('click', function(e) {
                    
                    console.log("Removing existing field!");

                    e.currentTarget.parentNode.remove();

                }, false);
            }
        });

        window.addEventListener('load', function() {
            
            const here = document.getElementById('here'); 

            here.addEventListener('click', function(e) {
                const tgt = e.target;
                
                if (tgt.classList.contains('remove')) {
                    console.log("Removing existing field!");
                    
                    tgt.closest('div').remove();
                }

            });

            var count = <?php echo $c; ?>;

            document.getElementById('btn').addEventListener('click', function() {

                count = count + 1;

                console.log("Adding additional field number " + count + "!");

                here.innerHTML += `<div>Coordinate: <input type="text" name="coordinatesId[${count}][title]" value="" /> 
                    Latitude & Longitude: <input type="text" name="coordinatesId[${count}][coord]" value="" />
                    <button type="button" class="remove"> Remove</button></div>`;
            });
        });
    </script>